mano - dibujar lineas en canvas javascript

Lienzo HTML5: obtenga un 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 se ve así:

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 recibir una notificación cuando se termine 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 sincrónico .

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

Answer 2

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

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 en su sitio web :

Los navegadores cargan imágenes de forma asíncrona mientras los scripts ya se están interpretando y ejecutando. Si la imagen no está completamente cargada, el lienzo no puede procesarla.

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