Limpiar líneas de canvas de javascript con líneas que se intersectan

Question

Tengo un lienzo que tiene algunas líneas dibujadas por el movimiento del mouse. Quiero que la línea solo dure unos segundos antes de eliminarse. Un poco como girar una cinta alrededor de donde tiene una longitud determinada. Estoy usando lineTo para dibujar las líneas en el lienzo. Hice referencia a un poco del código desde aquí.

El problema

puedo borrar la línea mediante el uso de clearRect() pero esto borra literalmente todo y el problema es que si se cruza la línea que salga del área de intersección también. aquí es mi violín clic y arrastre dentro del cuadrante inferior derecho:

http://jsfiddle.net/m2K5h/

rect clara me daría esto:

En resumen

clearRect simplemente borra todo, me quiere "dibujar" dinámicamente la línea para que tenga una vida útil. Y no puedo por la vida de mí encontrar algo para hacerlo ...

¡Cualquier ayuda sería increíble!

Answer 1

El lienzo es una superficie de mapa de bits. Nada en el lienzo podría indicar que su línea se ha cruzado a sí misma, que no sean los valores de píxel.

Para que una línea se desactive sola, debe almacenar todas las coordenadas de la línea tal como se dibuja. Cuando llega el momento de que la línea se desactive, comienza una animación en cada fotograma, borra el lienzo y vuelve a dibujar una parte de la línea que se contrae.

jsfiddle example

Si tiene cualquier otra cosa de gran complejidad que no quiere borrar y volver a dibujar rápidamente, puesto que en un segundo lienzo detrás del primero.