I’m drawing two
rect‘s inside my
canvas, both of which are specified to be 40 wide and 20 tall.
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/
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.