HTML5 Canvas distorted?

Question

I thought for a bit of fun I would have a look at the canvas. It seemed fairly easy to draw a box so I pretty much copied an example from the mozilla developer site. You can

Answer 1

Canvas works like an image tag

A canvas works like an image, it has a width and a height.

In the case of an image, the browser can work out the width and height by inspecting the file. In the case of a canvas, the width and height cannot be inferred so you must set them directly as attributes.

CSS

When you set the width using CSS, the height will be adjusted too to maintain the aspect ratio, just like an image. You could set the width to be 100%, and the canvas will fill the container.

canvas { 
  width:100% 
}

If you set both the width and height the canvas will be stretched to fit the space you have allocated, just like an image.

Defaults

The default width and height of a canvas are 300x150, a 2/1 ratio.