[SOLVED] Canvas rect’s with the same size at different locations are drawn at different sizes

Issue

This Content is from Stack Overflow. Question asked by Tyler N

I’m drawing two rect‘s inside my canvas, both of which are specified to be 40 wide and 20 tall.

The first rect has its top-left corner at 0,0 while the other one has its top-left corner at 60,40.

The one beginning at 60,40 is massive compared to the first. Even though their size should be the same

I am using Infinite Canvas for my project, but this issue appears to happen whether I include this or not.

Here is a fiddle with Infinite Cavnas: https://jsfiddle.net/dgLt3o48/2/

And here is a fiddle without it: https://jsfiddle.net/dgLt3o48/1/



Solution

The rect() method is defined as rect(x, y, width, height), not as rect(x1, y1, x2, y2). Your second rectangle is thus not a 20 x 40 rectangle, but a 100 x 60 one.

Also beware that if you don’t call ctx.beginPath(), when you call stroke() all the path is drawn again, this means your smaller rectangle is currently drawn twice.


 This Question was asked in  StackOverflow by  Tyler N and Answered by Kaiido It is licensed under the terms of 
CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.
people found this article helpful. What about you?