Sprite not appearing on canvas?

infinitim · February 13, 2017

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/

<html>
<body>
    <canvas id="exploder"></canvas>
    
    <script>
    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
        that.context.drawImage(
           that.image,
           0,
           0,
           that.width,
           that.height,
           0,
           0,
           that.width,
           that.height);
    };

    return that;
           
            
}
        
        explosion.render();
        
        
    </script>
    
    </body>

</html>

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.

GBeebe · February 14, 2017

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)

mattstyles · February 14, 2017

Use the onload event handler on the image to wait for it to load, then proceed to draw etc

infinitim · February 14, 2017

Thanks so much guys... Got it figured out. Can now move on to next stage of my game! Very helpful...

Sign In

Sprite not appearing on canvas?

Recommended Posts

infinitim

Link to comment

Share on other sites

GBeebe

Link to comment

Share on other sites

mattstyles

Link to comment

Share on other sites

infinitim

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity