HTML5 Canvas: Ottieni eventi al termine del disegno

Question

Sto disegnando un'immagine su un elemento canvas. Poi ho il codice che dipende da questo processo per essere finito. Il mio codice è simile al seguente:

var myContext = myCanvasElement.getContext('2d'), 
    myImg = new Image(); 

myImg.onload = function() { 
    myContext.drawImage(containerImg, 0, 0, 300, 300); 
}; 

myImg.src = "someImage.png"; 

Così ora, vorrei essere informato quando drawImage è fatto. Ho controllato le specifiche ma non sono riuscito a trovare né un evento né la possibilità di passare una funzione di callback. Finora ho appena impostato un timeout, ma ovviamente non è molto sostenibile. Come risolvi questo problema?

Answer 1

Come quasi tutte le funzioni Javascript, drawImage è sincrono.

Cioè, verrà restituito solo una volta che ha effettivamente fatto ciò che dovrebbe fare.

Answer 2

Hai già un evento quando l'immagine viene caricata e fai una cosa (disegno). Perché non fare un altro e chiama la funzione che farà tutto ciò che vuoi dopo drawImage? Letteralmente solo:

myImg.onload = function() { 
    myContext.drawImage(containerImg, 0, 0, 300, 300); 
    notify(); // guaranteed to be called after drawImage 
}; 

Answer 3

Jef Claes spiega abbastanza bene on his website:

Browser immagini di carico in modo asincrono, mentre gli script sono già interpretato ed eseguito. Se l'immagine non è completamente caricata, il canvas non riesce a renderlo.

Fortunatamente questo non è difficile da risolvere. Dobbiamo solo aspettare di iniziare il disegno fino a quando non riceviamo una richiamata dall'immagine, notificando che il caricamento di è stato completato.

<script type="text/javascript">   
window.addEventListener("load", draw, true); 

function draw(){          
    var img = new Image(); 
    img.src = "http://3.bp.blogspot.com/_0sKGHtXHSes/TPt5KD-xQDI/AAAAAAAAA0s/udx3iWAzUeo/s1600/aspnethomepageplusdevtools.PNG";     
    img.onload = function(){ 
     var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d');  

     context.drawImage(img, 0, 0);   
    };    
}