Question

I am developing a Windows 8 JavaScript app.

I try to load image in canvas but when I run the app directly using CTRL + F5 the app runs but there is no image on the canvas.

When I debug the app without placing a break point and the app directly opens but still there is no image.

When I debug the app and place a breakpoint then run the code step by step when the code for image generation is finished I continue debug by clicking on the debug sign and now the image shows up in the canvas. I’ve no idea what’s going on here why it is only showing the image on debug with breakpoint. Why it is not showing the image when I run it normally without debugging?

Here’s the code for image generation.

Init: function (canvas,ctx) {

    this.ghostCanvas = canvas;
    this.ghostCanvasCtx = ctx;

    var banner = new Image();
    banner.src = "images/banner.jpg";

    ctx.drawImage(banner, 100, 100);
}

This code works when I place a breakpoint and run it line by line. Also I am using two canvases one of top of the other. But the z-index of this canvas is greater so there should be no problem in that. What’s causing this problem?

Answer 1

You need to wait for the image to load before drawing it on the canvas. Add an event handler on your image object for the ‘load’ event, and when that is called then draw the image in the canvas.