javascript - How do I know when HTML5 Canvas' Rendering is Finished?

Question

html:

<canvas id="cnv" width="786" height="1113">

js:

var img = new Image(),
    cnv = document.getElementById('cnv');

var context = cnv.getContext('2d');

img.onload = function () {

    context.drawImage(img, 0, 0, 786, 1113);
    alert('finished drawing');

}

img.src = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png';

http://jsfiddle.net/FxrSa/14/

I want to show the alert after the canvas finished his rendering. But the alert show before the image is drawn.

How can I wait for the GUI thread to finish his rendering?

Answer 1

Canvas drawImage is synchronous. And even, really synchronous.

Your problem is that alert() is blocking, and even really blocking.

By this I mean it does not only block the js execution, it also blocks the page rendering. So the browser has painted your image on your canvas, but didn't display it yet when you called alert().

One should always avoid alert and replace it with normal DOM elements.

Ps: Here is a proof that your image is indeed already painted on the canvas.