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)
Canvas has two sizes, the size of the element and the size of the drawing surface. The default size for both element and drawing surface is 300 x 150 screen pixels. To set the height and width canvas HTML5 has two attributes: Height: With the help of Height attribute we can set the height.
Resize it using CSS every time you resize with canvas. width, canvas. height the canvas is fully cleared. if you're building a drawing app you have probably defined a function to redraw the canvas every time a change is applied so use the same function to redraw the canvas after it changed.
I think you just need to also set its width & height properties:
canvas.width = 200;
canvas.height = 100;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With