CODEWITHSUNDEEP
javascriptcsshtmlhtml5-canvas
Roman
Roman

Reputation: 33

JavaScript function to show GIF

I am just starting out with HTML5. I have written lots of programs in C but now I wanted to learn HTML5. I am trying to write a game about Zombies and I need to display a GIF, but my function showGif is not working and I can't figure out why. Can you help me?

I first show the background image and then I am trying to show the GIF on top of the background inside the canvas.

I don't know how to attach here the image files but the sources in the code are correct I double checked.

Probably there more errors than just in the function and I would appreciate that you point them out so I can learn.

window.onload = function()
{
    var c=document.getElementById("gameCanvas");

    var ctx=c.getContext("2d");

    var background = new Image();

    background.src = "imgs/background.png";

    background.onload = function()
    {
        ctx.drawImage(background, 0, 0);
    };

    var imgSrc = ["imgs/zombieGif/frame0.png", "imgs/zombieGif/frame1.png", "imgs/zombieGif/frame2.png", "imgs/zombieGif/frame3.png", "imgs/zombieGif/frame4.png", "imgs/zombieGif/frame5.png", "imgs/zombieGif/frame6.png", "imgs/zombieGif/frame7.png"];

    showGif(imgSrc, 8);

    function showGif(imgSrc, num)
    {

        for(var i=0; i<num; i++)
        {
            var curImg = new Image();

            curImg.src = imgSrc[i];

            curImg.style.zIndex = "1";

            curImg.onload = function()
            {
                ctx.drawImage(curImg, 0, 0);
            };
        }
    }
};
body {
  text-align: center;
}

canvas {
  border: 1px solid black;
}

h1 {
  font-size: 60px;
  font-family: 'Architects Daughter', cursive;
}
<!DOCTYPE html>
<html>
<head>
  <title>Zombies</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
  <h1>Zombies</h1>
  <canvas id="gameCanvas" width="1140" height="540"></canvas>
</body>
</html>

Thank you in advence for your time.

Ps: Sorry for occasional mistakes on my English.

Upvotes: 1

Views: 530

Answers (1)

Jorge Fuentes Gonz&#225;lez
Jorge Fuentes Gonz&#225;lez

Reputation: 11806

You are drawing a blank image, as when you set the source of the image, the browser has to make an HTTP request and load the data inside the image element. Meanwhile the javascript code is running (this is called asynchronous load), so when you reach the ctx.drawImage method, the browser is still making the HTTP request to load the image.

A canvas is not al element which updates with your image updates. A canvas is just a set of pixels where you draw your elements. Is just that, a pixel canvas, like a painting canvas.

You need to load the images, wait for them to be loaded and draw all the image pixels inside the canvas after the image element has all the image data loaded. You can attach an event handler to the load event.

For this you need to learn about callbacks and such, so if you don't know what I'm talking about, do not try to build the house from the roof. Get a "javascript for begginers" tutorial and read it from the bottom. Specially search something talking about asynchronous callbacks.

Upvotes: 1

Related Questions