HTML5 Canvas: Why are these squares not the same size?

Question

Recently, I was playing around with the HTML5 Canvas and I ran across the problem seen here - https://jsfiddle.net/6buwndz6/ .

Here's the code:

ctx.fillStyle = "#e74c3c";
ctx.beginPath();
ctx.rect(0,0,15,15);
ctx.fill();
ctx.closePath();

ctx.fillStyle = "#e67e22";
ctx.beginPath();
ctx.rect(60,14,75,29);
ctx.fill();
ctx.closePath();

The only differences between the two squares (that I can see) are the colour codes, and the starting position of the x , y , w and h parameters. However, in both cases the w and h parameters are 15 more than the x and y parameters. So, apart from being positioned in different places, they should be the same size (15 x 15), right?

Nope :P

The orange square is significantly bigger than the red one, and I can't see any real reason as to why . Just to clarify, the red square is the intended size.

I'm using Chrome 49 on Mac OS X Yosemite.

Any suggestions?

Answer 1

I think that you're thinking the arguments for ctx.rect is x1, y1, x2, y2 ; but, it is, in fact, as you say: x, y, w, h .

Therefore: 15x15 != 75x29

Answer 2

W means width and H means height. Therefore, both cases should be 15

ctx.rect( 0, 0, 15 , 15 );

ctx.rect( 60, 14, 15 , 15 );