I'm playing around with html5 canvas, and I have came across some strange behaviour. I'm doing pretty basic animation based on these three steps:

1. I call update() function inside wich I change x and y of the objects.
2. I clear the canvas with this line of code this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
3. I redraw all the elements.

This is how I draw the figures:

// drawing a circle
function drawCircle(x,y) {
    var rad = 5;
    ctx.beginPath();
    ctx.arc(x, y, rad, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
}

// and a rect
function drawRect(x, y,) {
     var width = 60,
       height = 10;
    ctx.fillRect(x, y, width, height);
}

Now I expect my rectangle to be 60px width and 10px height. I've added a div after the <canvas> tag and set its width and height to 60px and 10px respectively in order to illustrate the discrepancy. As you can see on the picture, obviously my rectangle isn't 60х10. The same apply to the circle. What am I missing here?

here is fiddle

I'm playing around with html5 canvas, and I have came across some strange behaviour. I'm doing pretty basic animation based on these three steps:

1. I call update() function inside wich I change x and y of the objects.
2. I clear the canvas with this line of code this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
3. I redraw all the elements.

This is how I draw the figures:

// drawing a circle
function drawCircle(x,y) {
    var rad = 5;
    ctx.beginPath();
    ctx.arc(x, y, rad, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
}

// and a rect
function drawRect(x, y,) {
     var width = 60,
       height = 10;
    ctx.fillRect(x, y, width, height);
}

Now I expect my rectangle to be 60px width and 10px height. I've added a div after the <canvas> tag and set its width and height to 60px and 10px respectively in order to illustrate the discrepancy. As you can see on the picture, obviously my rectangle isn't 60х10. The same apply to the circle. What am I missing here?

here is fiddle

• javascript
• css
• html
• canvas

Share Improve this question Follow edited Apr 5, 2014 at 13:09 dKab asked Apr 5, 2014 at 13:00 dKabdKab 2,85855 gold badges2424 silver badges3838 bronze badges 6

• please add a fiddle. From my experience you also have to add canvas.attr('width') = 60; canvas.attr('height') = 10;. This seemed to solve my problem. – Anubhav Commented Apr 5, 2014 at 13:01
• How is your <canvas> styled? – Paul S. Commented Apr 5, 2014 at 13:01
• @PaulS. #game_field { width: 500px; height: 500px; border: 1px solid black; } – dKab Commented Apr 5, 2014 at 13:02
• By default, the canvas is not square. There are two ways of fixing this. You can 1. set a css rule for it that sets the width and height to be the same, or 2. set the .width and .height attributes in javascript. Since your image is stretched vertically, it seems you've tried to fix it with css. That changes the display size of the canvas, but only the javascript approach will change the number of pixels the canvas has. EDIT: Just saw your css - knew it! Set the .width and .height attribs to 500 in JS and watch the difference! – enhzflep Commented Apr 5, 2014 at 13:05
• @dKab do the width and height attributes on <canvas> match the width and height in the CSS? – Paul S. Commented Apr 5, 2014 at 13:09

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 9

Set the size of the canvas using it's width and height attributes (for tag) or properties (in JS):

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

in JS:

canvasEl.width = 400;
canvasEl.height = 400;

Don't use CSS as that only affects the canvas element but not its bitmap (consider canvas as an image). The default size of a canvas is 300 x 150 pixels. If you don't change that size it will be stretched to the size you set using CSS. This is why we in general don't remend using CSS (there are special cases though where CSS is necessary such as print situations, non 1:1 pixel aspect ratios and so forth).

Probably it's because you styled your canvas to a costum with/height. A canvas' default width/height is 150*300 and if you do not scale well you obtain such result as you found.

drawImage(image, x, y, width, height)
    This adds the width and height parameters, which indicate the size to which to 
    scale the image when drawing it onto the canvas.

So to be short you have to scale your drawings.

the Canvas element on MDN

Canvas drawing on MDN