JS Canvas shape duplication issues

He guys, I just bumped into this issue while creating a drawing app. I started with stroke rectangle shapes, it works fine in some places inside the canvas but when it reached around 50% to the right of the canvas it keeps printing. I really appreciate if someone can help point what is wrong with this code thank you! video: https://www.loom.com/share/958daa9f8db643e59f1b987061886128 code: https://codepen.io/jtzuya/pen/eYoweNa?editors=1111
2 Replies
MarkBoots
MarkBoots3mo ago
i think it would be easier to have a temporary canvas (on top of the standard one) where you live draw the rectangle (clear the canvas every tick). only when the mouse is released, you draw the rectangle (start / end pos) to the standard one. that way you don't need to consider/redraw previous added shapes
jtzuya
jtzuya3mo ago
I see this makes more sense, thank you!