Rectangle on HTML5 Canvas is stretched

Question

I am working on a website and I try to get rectangles on a HTML5 canvas with javascript. Normally this is no problem but now when I make a rectangle with the width and height of 10. It seems that it makes a rectangle with the width of 10 and the height of 20.

I'm making the Rectangle like this:

var canvas = $("#canvas");
var context = canvas.get(0).getContext("2d");

context.fillRect(0, 0, 10, 10);

The div canvas is set with a width of 100% but i tried to give it a fixed width and that didn't help either.

Answer 1

You need to set a width and height on your canvas element, otherwise this can be the result in some browsers.

<canvas id="canvas" width="400" height="300" />

And you can not set the canvas size with CSS, this will stretch the canvas.

Answer 2

The default size of the canvas is 300 x 150.

You are probably using these defaults, which will make the rectangle look not square....