How to resize a HTML Canvas object after creating using createElement()?

Question

I'm creating a HTML Canvas object using this javascript code:

var Canvas = document.createElement("canvas");
Canvas.style.width = "500px";

and then i'm drawing text upon it.

When the canvas is displayed, the whole canvas has been scaled up (including content) to to match the 500px width, which results in ugly resampling. What i really want, is that the content stay the same size, only the canvas itself made bigger.

Any ideas?

Answer 1

Try changing the element’s width instead of its CSS width.

Canvas.width = 500;

Answer 2

Thomas' answer is correct, but it sound's like you also want to keep the existing content on the canvas. When you change the canvas size, it automatically gets cleared and reset to it's default state. Because of that, you will either need to redraw the contents, or copy the contents to another canvase (using drawImage), resize the canvas, then copy the contents back (again, using drawImage).