I init my canvas like this:

<canvas id="canvasDiv" width="20" height="20"></canvas>

and somewhere in the code I want to resize it to it's final size:

var canvas = document.getElementById("canvasDiv");
canvas.style.width = 200;
canvas.style.height = 100;

However, any pixel I plot on my canvas is scaled (so it's not 1 pixel anymore).

How does one change the dimensions of a canvas without this scaling effect? (So programmatically)

I init my canvas like this:

<canvas id="canvasDiv" width="20" height="20"></canvas>

and somewhere in the code I want to resize it to it's final size:

var canvas = document.getElementById("canvasDiv");
canvas.style.width = 200;
canvas.style.height = 100;

However, any pixel I plot on my canvas is scaled (so it's not 1 pixel anymore).

How does one change the dimensions of a canvas without this scaling effect? (So programmatically)

• javascript
• css
• html
• canvas

1 Answer 1

I think you just need to also set its width & height properties:

canvas.width = 200;
canvas.height = 100;