Creating a GIF using HTML5’s Canvas

Lately, I’ve been envious of what other people have created using Canvas. It seems like HTML5 is becoming synonymous with Canvas among certain designer/developer groups and everyone seems to be doing amazing things with it. I decided to go the opposite way and solve a problem that doesn’t exist in the first place. A GIF-style animation with playback controls. So, essentially a muted video. I have gone the full circle.

I got this idea after realizing you can actually plot an image using Canvas built-in functions. The particular canvas function in this case is the .drawImage(src.jpg,height, width). From there we can easily see how this unfolds. Not really? Well, hop on the train to Hipsterdesignsville.

First of all, you need to find a gif frame-splitter. This could be any tool, from your photo editing software to any one of the multiple online tools. In my case, I used GIF Explode as I was only using an 8-frame animation. I highly recommend it. The idea behind this exercise is as follows: i) arrange a number of frames in their respective order ii) make a function that obtains an image and displays it on the canvas iii) finally make this function iterate the array of images using setInterval().

I also added a few fancy buttons for control of the animation. Basically it gives the ability to pause, play or rewind. This is the part where I feel canvas gets a leg over gifs.

You can see the full animation in action here.

 

Advertisements