HTML5 Canvas: pobierz zdarzenie po zakończeniu rysowania

Question

Rysuję obraz do elementu canvas. Następnie mam kod, który zależy od tego procesu do skończenia. Mój kod wygląda następująco:

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

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

myImg.src = "someImage.png"; 

Teraz chciałbym otrzymać powiadomienie, gdy drawImage zostanie wykonany. Sprawdziłem specyfikację, ale nie mogłem znaleźć ani zdarzenia, ani możliwości przekazania funkcji zwrotnej. Do tej pory ustawiłem limit czasu, ale to oczywiście nie jest bardzo trwałe. Jak rozwiązujesz ten problem?

Answer 1

Podobnie jak prawie wszystkie funkcje JavaScript, drawImage jest synchroniczna.

Oznacza to, że powróci tylko wtedy, gdy faktycznie wykona to, co powinien.

Answer 2

Masz już zdarzenie, gdy obraz się wczytuje, i robisz jedno (rysujesz). Dlaczego nie zrobić innego i zadzwonić do funkcji, która zrobi wszystko, co chcesz zrobić po drawImage? Dosłownie:

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

Answer 3

Jef Claes wyjaśnia to całkiem dobrze on his website:

Przeglądarki zdjęć podczas ładowania asynchronicznie skrypty są już interpretowany i wykonywany. Jeśli obraz nie jest w pełni załadowany, płótno nie renderuje go.

Na szczęście nie jest to trudne do rozwiązania. Musimy tylko poczekać, aby rozpocząć rysowanie , aż otrzymamy oddzwanianie z obrazu, powiadamiając o zakończeniu ładowania .

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