Setting canvas.width automatically sets canvas.style.width

My webpage receives parameters about how big an canvas element on it needs to be and then creates it dynamically with JS. Note that I need to specify the canvas.width and canvas.height - that is not the same as specifying the canvas.style.width and canvas.style.height

The canvas is inserted in a div with id 'canvascontainer' - The required canvas width and height is held in variables canvasWidth and canvasHeight

var c = document.createElement("canvas");
c.width = canvasWidth;
c.height = canvasHeight;
document.getElementById('canvascontainer').appendChild(c);

On a desktop browser, this makes the element correctly, tested on an Android mobile, it does not. For example, with canvasWidth = 340 and canvasHeight = 494:

• On desktop - canvas.width = 340 and canvas.height = 494, there is no mention of canvas.style.width and canvas.style.height in the css styling, and if inspected it's found to be 340 and 494.


• On mobile - Somehow its gets set to canvas.width = 1020 and canvas.height = 1482, while the canvas.style.width and canvas.style.height is automatically set to 340 and 494

I set the following meta tag: <meta name="viewport" content="initial-scale=1">

If I, in the developer console, set my canvas on the mobile device to a specific size with canvas.width=340, the css width property is automatically set to a third of that value - I don't want that to happen!

I need to have the canvas.width on mobile to be 340 and canvas.height to be 494, and the css to have inherently the same values. Because at this stage, my canvas is larger that what is displayed so the full canvas isn't shown.

Any suggestions welcome, thanks.