I have a web application where you can draw a rectangle on a canvas. I use two canvas elements: one for the preview while drawing and another one laying exactly under the ot
If you only need to stroke a rectangle you can use this version:
context2.strokeRect(xStart, yStart, x - xStart, y - yStart);
instead of rect()
+ stroke()
.
This does not add any sub path to the main path but draws directly to canvas. If you need to add other shapes to your path later remember to use beginPath()
for rect()
in a similar way as you already do in startLine()
as rect()
add a sub-path.