Jump to content

Sprite not appearing on canvas?


Recommended Posts

Hi everyone... I'm making a simple HTML5/JS program I plan to integrate into an existing game I have that is supposed to load an explosion sprite from a sprite sheet I created (375px by 25px, each individual sprite is 25px by 25px, 15 sprites total) onto the HTML canvas. It is not yet animated, as I haven't been able to make it actually show up (this is my problem) I'll leave the code below, if you see what's causing the problem, please leave a reply with a suggestion on how to fix (that would be really helpful as I have been making zero progress in the past hour). Thanks in advance!  If it helps, I have been using code from this tutorial here: http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/


    <canvas id="exploder"></canvas>
    var canvas = document.getElementById("exploder");
        canvas.width = 25;
        canvas.height = 25; 
        var explosionImage = new Image();
        explosionImage.src = "ExplosionFinal.png";
        var explosion = sprite({
    context: canvas.getContext("2d"),
    width: 25,
    height: 25,
    image: explosionImage
        function sprite(options) {
    var that = {};
    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
            that.render = function() {

        // Draw the animation

    return that;


And when I run this in Chrome nothing is showing up in the canvas element. As far as I can tell it isn't an error with sourcing the file as when I hover over this statement here:

explosionImage.src = "ExplosionFinal.png";

my text editor shows a preview of the file, with the sprite sheet showing. 

Link to comment
Share on other sites

The problem may be that the image hasn't loaded yet. Trying to draw an image, before it's loaded, seems to screw it up for the rest of the session.

Try this:

 var explosionImage = new Image();
 explosionImage.loaded = false;
 explosionImage.onload = function() {
   this.loaded = true;
 explosionImage.src = "ExplosionFinal.png";

Then before you try to draw the image, check to see if (explosionImage == true)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...