Chrome 31.0 HTML5 Canvas Draw Image

Question

Since downloading the current version of chrome (Version 31.0.1650.57) I've been completely unable to draw images in a HTML5 Canvas with my code; there are no errors and it's finding the resources, they just aren't drawing. I'd really appreciate some help on this!

var grass_img = new Image();
grass_img.src = 'grass.gif';
grass_img.onload = draw_here(grass_img, (center_x + base_x + xpos), (center_y + base_y + ypos),1);

Which appears here and there on several different images and calls:

function draw_here(image, x, y, scale){
     draw_canv.drawImage(image, x, y, image.width * scale, image.height * scale);
}

X and Y are correct, as is the scale; there are no coding errors picked up by the debugger and the program worked perfectly until the latest version of chrome came out. Downgrading chrome is also not an option.

Answer 1

The problem is in this line:

grass_img.onload = draw_here( /* ... */ );

You seem to think that you assign the function draw_here as an onload-handler. But that's not what really happens in this line. What you really do is execute draw_here immediately and assign the return-value of that function (which is undefined ) to grass_img.onload .

Try this instead:

grass_img.onload = function() {
    draw_here(grass_img, (center_x + base_x + xpos), (center_y + base_y + ypos),1);
}

This creates an anonymous function which is assigned to the onload-handler. When that anonymous function is called (which will happen when the load-event is triggered) it calls your draw-handler with your arguments.

Answer 2

I solved the problem. It seems that the latest version of Chrome does not like it if you declare your image in every frame iteration. (Something it seems to have allowed previously, but I really shouldn't have been doing.) If you declare your images and their sources at the top of your js, outside of any functions, and only draw them in functions then the problem is solved, eg:

var image = new Image();
image.src='image.jpg';

someFunction() {
    canvas.drawImage(image,0,0);
}

Answer 3

Note: .src should always be called AFTER .onload . Otherwise lots of hard-to-track-down buggies (like this one) appear. Especially if your image loads before onload can be parsed. Your currently accepted solution is possibly functional due to a race condition with function overhead timing.