Sizing and scaling canvas element

Question

I am studying html5 canvas. In the fiddles linked I am trying to get a canvas and a circle drawn on it, which I want to be scalable.

This fiddle does not work as I expect it to do. On the other hand that one works.

The difference is in the width and height properties of the canvas element. In first one I put them in a style tag, in the latter one I inline them in the canvas element. first one:

canvas#myCanvas {

              border: 1px solid;
          }

        <canvas id="myCanvas" width="200px" height="200px"></canvas>

second one:

canvas#myCanvas {
              width: 200px;
              height: 200px;
              border: 1px solid;
          }

        <canvas id="myCanvas"></canvas>

Answer 1

This question has been asked before. I looked for a simple & easy to understand answer from previous posts, but they all seemed confusingly technical.

Here's a less technical answer that's hopefully easier to understand...

Canvas has a default size of 300x150px. When you resize canvas with CSS the browser will "stretch or squish" the existing pixels to fit into your new size dimensions. So when you resize with CSS from 300x150 to 200x200 your existing canvas will appear distorted:

• Content will appear horizontally squished because 300 pixels of original content width is being squished into the new 200 pixel width.

• Content will appear vertically stretched because 150 pixels of original content height is being stretched into the new 200 pixel height.

If you want to resize with CSS, to avoid this distortion you must resize both the width & height in proportion to the original canvas size. You can do this by changing the width & height by the same proportion:

// when using CSS resizing, do it proportionally to avoid distortion
height:200px;    // 150 * 4/3 = 200px
width:400px;     // 300 * 4/3 = 400px

Alternately, you can resize the canvas element itself. This resizing actually adds or subtracts pixels from the canvas surface. Therefore, there is no stretching or squishing. However, resizing the canvas element itself will also automatically erase the canvas contents. So after resizing the canvas element itself you must redraw the previous content back to the canvas:

// resizing the canvas element will not cause distortion
canvas.width=200;
canvas.height=200;

// now redraw the previous content back to the canvas

Answer 2

This is not a new question, and has been answered many times.

see answers here:

Canvas width and height in HTML5

and here:

Canvas is stretched when using CSS but normal with "width" / "height" properties