In rare occasioni, <canvas> non ridisegna

Question

Io uso <canvas> a disegnare tutte le note e glifi nella mia educazione musicale applicazioni web: http://www.musictheory.net/exercises/keysig/bc98yy

Una Firefox 15.0.1 utente ha riferito che a volte l'esercizio passa alla domanda successiva, ma la tela mostra ancora la domanda precedente. Ho visto questo accadere nel test una volta (su ~ 500 domande).

Quando si verifica, la tela è stata cancellata via sia canvas.width = canvas.width e una chiamata al .clearRect dal contesto e glifi sono stati disegnati in JavaScript tramite .beginPath, .quadraticCurveTo, .closePath, ecc, tuttavia, sembra che buffer di supporto della tela mai viene lavato/disegnato nella finestra.

ho visto le segnalazioni di bug in passato per quanto riguarda questioni simili:

• 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

posso forzare un ridisegno facendo un DOM hackerare come l'inserimento un nodo di testo come figlio dell'area di disegno, quindi rimuoverlo nel ciclo ciclo di esecuzione successivo o modificare il colore di sfondo o il riempimento del tela. Questo sembra pesante, tuttavia, e continuo ad avere la fastidiosa sensazione che mi manchi qualcosa di ovvio.

Il mio codice di disegno è abbastanza semplice:

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? 

ho fatto sì che il numero di .save e .restore chiamate sono bilanciati.

1) Sto chiamando questo codice direttamente in risposta a un gestore di eventi onclick. Dovrei invece usare requestAnimationFrame o setTimeout per eseguire il disegno su un ciclo di ciclo di esecuzione futuro?

2) Non mi manca qualcosa di ovvio, come l'API canvas.pleaseRepaintNow(), giusto?

3) Le altre persone hanno riscontrato problemi simili e hanno fatto ricorso alla modifica DOM per forzare il ridisegno?

Answer 1

Ho cercato di ottenere il bug ma dopo aver cliccato follemente su Firefox per un po ', non l'ho mai visto. Questo è il modo in cui cancello la tela che sembra funzionare, ma la prendo con un pizzico di sale poiché non riesco a far scattare il bug, non posso controllare per vedere se questo risolve qualcosa ...

// 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

Aggiungi context.stroke(); all'ultima riga della tua funzione , corregge un bug in Firefox. Altrimenti le modifiche alla tela non vengono visualizzate fino a quando la finestra non viene ridisegnata.

Ha funzionato almeno nel mio caso.

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