How to redraw lines in HTML5?

Question

JavaScript

Hey All!
I'm doing a mini graphic editor
when drawing lines, I ran into a problem , the
idea was to draw a line in the "XOR" mode and overwrite the previous one on the next drawing, so it turns out that I can drag the line behind the cursor without overwriting the image,
but when overwriting, it turned out that there was a "trace" from the old line, edges are not rubbed
here example:
jsfiddle.net/uv0gk2pn/8
who faced how to solve the problem?
PS
The variant with erasing through clearRect(...) is not suitable, since you will have to restore an already drawn picture, and this is an excess load

Answer 1

Make two canvas elements on top of each other. In the lower image, in the upper, "working", line is dragged. Then it can be erased with clearRect.

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Then the changes can be copied to the bottom layer.

Answer 2

I would generally use for such tasks some framework for working with canvas, such as LibCanvas , where such moments, buffering, etc. are already provided.