clearRect no borra el lienzo al dibujar líneas verticales

Question

Llegué a una carcasa de borde extraño para construir algo con lienzo en el trabajo. clearRect no borra el lienzo al dibujar líneas verticales que van desde la parte superior hasta la parte inferior del lienzo. Al renderizar otras cosas, clearRect funciona bien.

No estoy seguro de si me falta algo obvio, si esto es un comportamiento intencionado, o un error del navegador (poco probable ya que el comportamiento es idéntico en cromo, safari, firefox y opera en mac). Si se trata de un comportamiento intencional, ¿alguien sabe la razón detrás de esto y/o quizás puede señalar cierta documentación?

he cometido un pequeño caso de prueba que muestra el comportamiento con claridad, sólo la combinación clearRect líneas verticales/no borra el lienzo: http://jsfiddle.net/kZj6F/

Gracias!

Answer 1

Su problema es que falta beginPath provocando que las líneas subsiguientes se agreguen a la misma ruta que estaba stroke dibujando todas las líneas.

Si cambia a puntos y vuelve a líneas con la opción clearRect, puede ver el último arc añadido a la ruta que se está dibujando también. Simplemente agregue una llamada ctx.beginPath(); anterior ctx.moveTo(randomX + 0.5, 0); ctx.lineTo(randomX + 0.5, canvas.height); y el problema está resuelto.

Puede consultar http://jsfiddle.net/kZj6F/1/ para ver cómo funciona.

Bwt lo hará con otras formas también si se agregaron a la ruta y la ruta no se borró.