Displaying a loading spinner when drawing HTML5 canvas. Event? - html

Question

I have spent many hours searching for this, but either it's not a very common problem or my Google-fu is lacking.
The short version is I have site with an HTML5 canvas element that is displaying large complex drawing, which means it usually takes up to 10 seconds to complete.
How is it possible to hook into the drawing event? I can't find anything of the sorts, but it would really help user experience if a loading spinner was displayed as the canvas was being drawed. I have seen it done before, but not seen the "how".
Details for the experienced:
I am displaying a PDF with PDFJS, and have my own viewer instead of the supplied one. It works, but sometimes it draws the PDF very slow, hence the need of a spinner.

Answer 1

Here is a really simple and nasty example this now uses an event which you can fire off :).
jsFiddle : https://jsfiddle.net/CanvasCode/jwzLr4wh/1/
javascript
image = new Image();
image.src = "https://upload.wikimedia.org/wikipedia/commons/1/1e/Large_Siamese_cat_tosses_a_mouse.jpg";
var canvas = document.getElementById('myCanvas-1');
var ctx = document.getElementById('myCanvas-1').getContext('2d');
var loading = true;
var loadingText = "Loading";
var event = new Event('loading');
// Listen for the event.
canvas.addEventListener('loading', function (e) {
// Quick and nasty
setInterval(function () {
if (loading) {
console.log("update");
ctx.fillStyle = "#FFF";
ctx.fillRect(0, 0, 400, 400);
ctx.font = '15pt Arial ';
ctx.fillStyle = "#000";
ctx.fillText(loadingText, 200, 200);
if (loadingText == "Loading...") {
loadingText = "Loading";
}
loadingText = loadingText + "."
}
}, 1);
}, false);
canvas.dispatchEvent(event);
setTimeout(function () {
ctx.drawImage(image, 0, 0);
ctx.font = '15pt Arial ';
ctx.fillStyle = "#000";
loading = false;
}, 5000);
This now uses an event which you can fire off manually which will set the canvas to loading.