Clearing javascript canvas lineto with intersecting lines

Question

I have a canvas which has some lines drawn by mouse movement. I want the line to only last for a few seconds before removing itself. A bit like swirling a ribbon around where it has a set length. I am using lineTo to draw the lines in the canvas. I referenced a bit of the code from here.

The problem

I can clear the line by using clearRect() but this literally clears everything and the problem is that if the line intersects it clears the intersecting area too. here is my Fiddle click and drag inside the bottom right box:

http://jsfiddle.net/m2K5h/

clear rect would give me this:

In Summary

clearRect just wipes everything, I want to dynamically 'un draw' the line so it has a lifetime. And I can't for the life of me find something to do it....

Any help would be amazing!!!!

Answer 1

The canvas is a bitmap surface. Nothing in the canvas could indicate that your line has crossed itself, other than the pixel values.

In order to have a line un-draw itself, you need to store all the coordinates for the line as it is drawn. When it is time for the line to un-draw itself, you start an animation where every frame you clear the canvas and redraw a shrinking portion of the line.

jsfiddle example

If you have anything else of significant complexity that you wouldn't want to erase and redraw rapidly, put that in a second canvas behind the first.