Canvas rect's with the same size at different locations are drawn at different sizes

Tyler N 0
Viewed 17

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/

html5-canvas javascript html
1 Answers

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.

Kaiido0
Related