Canvas HTML5: Obtener evento cuando finalice el dibujo

Question

Estoy dibujando una imagen en un elemento canvas. Luego tengo un código que depende de que este proceso esté terminado. Mi código es el siguiente:

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

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

myImg.src = "someImage.png"; 

Así que ahora, me gustaría ser notificado cuando se hace drawImage. Revisé la especificación pero no pude encontrar un evento o la posibilidad de pasar una función de devolución de llamada. Hasta ahora solo he establecido un tiempo de espera, pero obviamente esto no es muy sostenible. ¿Cómo resuelves este problema?

Answer 1

Como casi todas las funciones de Javascript, drawImage es synchronous.

Es decir, solo volverá una vez que haya hecho lo que se supone que debe hacer.

Answer 2

Ya tiene un evento cuando se carga la imagen, y usted hace una cosa (dibujar). ¿Por qué no hacer otro y llamar a la función que hará lo que sea que desee hacer después de drawImage? Literalmente a:

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

Answer 3

Jef Claes lo explica bastante bien on his website:

Navegadores cargar imágenes de forma asíncrona, mientras que las secuencias de comandos ya están siendo interpretado y ejecutado. Si la imagen no está cargada por completo, el lienzo no puede representarlo.

Afortunadamente esto no es difícil de resolver. Solo tenemos que esperar para comenzar a dibujar hasta que recibamos una devolución de llamada de la imagen, notificando que se ha completado la carga .

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