How to dynamically scale an HTML5 <canvas> element?

Question

I want to resize a canvas element by dragging it in the corners.

share any hints.

thanks

Answer 1

You can resize by assigning the width and height attributes using numbers:

canvasNode.width = 200; // in pixels canvasNode.height = 100; // in pixels 

At least it works for me. Make sure that you do not assign lines (for example, “2 cm”, “3 inches” or “2.5 pixels”) and do not touch styles.

This is actually public knowledge - you can read all about it in the HTML canvas specification - it is very small and unusually informative. This is the whole DOM interface:

 interface HTMLCanvasElement : HTMLElement { attribute unsigned long width; attribute unsigned long height; DOMString toDataURL(); DOMString toDataURL(in DOMString type, [Variadic] in any args); DOMObject getContext(in DOMString contextId); }; 

As you can see, it defines the width and height of two attributes, and both of them are unsigned long.

With css3 you can also set a property

 resize:both;