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.