En raras ocasiones, <canvas> no redibuja

Question

utilizo <canvas> para sacar todas las notas y glifos en mi educación musical aplicaciones web: http://www.musictheory.net/exercises/keysig/bc98yy

Un usuario de Firefox 15.0.1 ha informado de que a veces el ejercicio pasa a la siguiente pregunta, pero el lienzo todavía muestra la pregunta anterior. He visto esto ocurrir en la prueba una vez (de ~ 500 preguntas).

Cuando esto ocurre, el lienzo se ha borrado a través tanto canvas.width = canvas.width y una llamada a .clearRect del contexto y de los glifos se han dibujado en JavaScript a través de .beginPath, .quadraticCurveTo, .closePath, etc. Sin embargo, parece que búfer respaldo de la lona nunca se enjuaga/dibuja en la ventana.

he visto informes de errores en el pasado con respecto a problemas similares:

• https://bugzilla.mozilla.org/show_bug.cgi?id=787623
• https://bugzilla.mozilla.org/show_bug.cgi?id=794337
• http://code.google.com/p/chromium/issues/detail?id=55339

puedo forzar un redibujo haciendo un DOM piratear como insertar un nodo de texto como elemento secundario del lienzo, y luego eliminarlo en el siguiente ciclo de ciclo de ejecución, o modificar el color de fondo o el relleno del lona. Esto parece pesado, sin embargo, y sigo teniendo la sensación de que me estoy perdiendo algo obvio.

Mi código de dibujo es bastante simple:

canvas.width = width; 
ctx.clearRect(0, 0, width, height); 
ctx.save(); 
// Lots of drawing code here 
ctx.restore() 
ctx.clearRect(0, 0, 1, 1); // Helped force a repaint on some older WebKit browsers? 

me he asegurado de que el número de .save y .restore llamadas están equilibradas.

1) Llamo este código directamente en respuesta a un controlador de eventos onclick. ¿Debo usar en su lugar requestAnimationFrame o setTimeout para realizar el dibujo en un ciclo de ciclo de ejecución futura?

2) No me extraña algo obvio, como una API canvas.pleaseRepaintNow(), ¿verdad?

3) ¿Han encontrado otras personas problemas similares y han recurrido a la modificación del DOM para forzar el redibujado?

Answer 1

Intenté que ocurriera el error, pero después de hacer clic locamente en Firefox por un tiempo, nunca lo vi. Así es como borro el lienzo que parece funcionar, pero lo tomo como un grano de sal ya que no puedo obtener el error. Tampoco puedo verificar si esto soluciona algo ...

// Store the current transformation matrix 
ctx.save(); 

// Use the identity matrix while clearing the canvas 
ctx.setTransform(1, 0, 0, 1, 0, 0); 
ctx.clearRect(0, 0, canvas.width, canvas.height); 

// Restore the transform 
ctx.restore(); 

Answer 2

Agregue context.stroke(); a la última línea de su función onLoad, soluciona un error en Firefox. De lo contrario, los cambios en el lienzo no se renderizan hasta que se vuelva a dibujar la ventana.

Funcionó en mi caso al menos.

window.onload = function() { 
    canvas = document.getElementById("canvas"); 
    context = canvas.getContext("2d"); 
    //Code here... 
    context.stroke(); 
}