HTML5-Canvas: Holen Sie sich das Ereignis, wenn die Zeichnung fertig ist

Question

Ich zeichne ein Bild auf ein Canvas-Element. Ich habe dann Code, der davon abhängt, dass dieser Prozess abgeschlossen ist. Mein Code sieht so aus:

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

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

myImg.src = "someImage.png"; 

Also jetzt möchte ich benachrichtigt werden, wenn drawImage fertig ist. Ich habe die Spezifikation überprüft, aber ich konnte weder ein Ereignis noch die Möglichkeit finden, eine Rückruffunktion zu übergeben. Bisher habe ich nur eine Auszeit gesetzt, aber das ist natürlich nicht sehr nachhaltig. Wie löst man dieses Problem?

Answer 1

Wie fast alle Javascript-Funktionen ist drawImagesynchron.

Das heißt, es wird nur zurückkehren, sobald es tatsächlich getan hat, was es tun soll.

Answer 2

Sie haben bereits ein Ereignis, wenn das Bild geladen wird, und Sie tun eine Sache (zeichnen). Warum nicht einen anderen tun und die Funktion aufrufen, die nach drawImage alles macht, was Sie wollen? Buchstäblich nur:

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

Answer 3

Jef Claes erklärt es ziemlich gut on his website:

Browser laden Bilder asynchron während Skripte sind bereits interpretiert und ausgeführt wird. Wenn das Bild nicht vollständig geladen ist, kann die Leinwand nicht gerendert werden.

Glücklicherweise ist dies nicht schwer zu lösen. Wir müssen nur warten, um Zeichnung zu starten, bis wir einen Rückruf von dem Bild erhalten, Ladevorgang wurde abgeschlossen.

<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);   
    };    
}