Why is canvas not rendering properly?

Question

I am rather familiar with making games using the HTML5 <canvas> tag. When I try to run my games from Komodo Edit 9 it works perfectly.

However, when I try to upload my game to ANY web hosting service, it never works properly. Like the following garridpunching.neocities.org.

The problem is that once the canvas renders, everything appears for a split second before disappearing instantly, leaving only a blank black canvas.

Google debugger returns the following error for all five hostings I tried: Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

The error is thrown on the line ctx.drawImage(sprite.cursor, cursor.x, cursor.y, 40, 40); , which works perfectly when I run the html file directly from localhost.

What does this mean and how do I fix it? Thanks in advance.

Answer 1

This could be related to an img not loading properly. Check the paths to your images, maybe you didn't copy some of them when deploying to the hosting service of you have a path somewhere that works on your local computer but not on the remote site.

Also: Do you load all your images from the same domain as the js? If this isn't the case it could also be triggered by a Cross-Origin Resource Sharing (CORS) issue.

Answer 2

This could be because you are calling step , ie beginning the 'game' before all the images have loaded. The solution would be to wait for sprite's images to be loaded before calling step .

load();
window.onload = step; // may need inline .onload() calls on sprite's imgs

The reason this wouldn't be happening locally is because it will load the requested images instantly, as it doesn't have to download them or anything like that.