Холст HTML5: получить событие, когда чертеж закончен

Я рисую изображение в элемент холста. Затем у меня есть код, который зависит от завершения этого процесса. Мой код выглядит следующим образом:

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

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

myImg.src = "someImage.png";

Итак, теперь я хотел бы получить уведомление, когда будет сделано drawImage. Я проверил спецификацию, но не смог найти ни событие, ни возможность передать функцию обратного вызова. Пока я просто установил тайм-аут, но это, очевидно, не очень устойчиво. Как вы решаете эту проблему?

Ответ 1

Как и почти все функции Javascript, drawImage является синхронным, то есть он вернется только после того, как он на самом деле сделал то, что должен был сделать.

Тем не менее, то, что он должен делать, как и большинство других вызовов DOM, - это списки очередей, которые нужно перекрасить в следующий раз, когда браузер попадет в цикл обработки событий.

Нет события, которое вы могли бы специально зарегистрировать, чтобы сообщить вам, когда это произойдет, поскольку к тому времени, когда может быть вызван любой такой обработчик события, перерисовка уже произошла бы.

Ответ 2

Джеф Клас объясняет это довольно хорошо на своем сайте:

Браузеры загружают изображения асинхронно, в то время как сценарии уже истолковано и исполнено. Если изображение загружено не полностью не может сделать это.

К счастью, это не сложно решить. Нам просто нужно подождать, чтобы начать рисование, пока мы не получим ответный звонок с изображения, уведомляющий о загрузке завершено.

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

Ответ 3

У вас уже есть событие, когда изображение загружается, и вы делаете одно (рисовать). Почему бы не сделать еще и вызвать функцию, которая будет делать то, что вы хотите сделать после drawImage? Буквально просто:

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