How to Gif or custom Gifs in Canvas

Storytime. You are creating a game. You just made this beautiful gif of clouds and you want to add it to your background canvas in the game. How do you do this?

Add it to the image tag?

In normal JavaScript, you would be correct. Yet when you are using Canvas, canvas stops the images for playing. Thus you will only see the first frame of the gif, it will not continue to play the gif. How do you solve this issue?

DrawImageMethod

To begin to understand how to solve it, lets walk through the DrawImage Method.

First you want to draw the cloud.

1st Parameter is the image that you want to draw.

Yet, it is NOT an image source. It is an image object created from the class Image().

The first line creates the image object. The second line gives it a source of image. The third is onLoad which just fires the function inside one the CloudImage is loaded.

The next four parameters are x,y,w,h

X is the position on the X-axis that the image will start on.

W is the Width of the image.

Note, unlike circles, if you have an image that starts on 10 with a with of 30. the width will simply add, so your image will end at 40, whereas in a circle, you note the centerpoint and the radius.

Y is the position on the Y-axis

H is the height of the Image

Thus when you call update it will draw your image.

This is not needed to draw the clouds, but it is needed to animate the clouds

Now you want to animate such clouds

How do you do it?

SpriteSheets and DrawImage other Parameters

Lets first look at a Sprite sheet

This is a sprite sheet. Note reading from top to bottom. The cloud on the right disappears then the cloud on the left appears and disappears. Note there is space in between each image. Thus basically you want the program to loop through your single image and also read it top to bottom. Each iteration of the loop should only be looking at one part. Like such

This is where the other parameters to drawImage come into play

sx and sy are the starts of the source image thus in this example it would be 0,0 because you would want the cut to start at the top.

The next is source width and height. This is simply the size for each chunk aka where the program cuts the single image. An easy rule of thumb is simply to use the width and height of the first image. If I drew an image that was 1000 by 1500. I would just use that as the width and height.

Finally, here is a working example of that will provide a loop animation in react. For my next blog post, I will go into this function, but for now, feel free to play around with it and reach out to me if you have any questions. Have fun coding and make cool things!

Related posts:

Understanding what a robots.txt file is and how to use it is essential when it comes to technical SEO for WooCommerce websites. If you’re unsure about robots.txt files then you are in the right…

When the winds blow wet and warm. When gray winter retreats from blooming-green-becoming. When new leaves dance like dyads in the rain. When the passion of the equinox stirs the blood and the sap…