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?

Thomas J Bradley · Accepted Answer · 2009-11-01 21:15:33Z

2

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

Canvas.width = 500;

answered Nov 1, 2009 at 21:15

Thomas J Bradley

14.6k3 gold badges20 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matthew Crumley · Accepted Answer · 2009-11-01 21:53:10Z

1

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).

answered Nov 1, 2009 at 21:53

Matthew Crumley

103k24 gold badges105 silver badges131 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related