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

2 thoughts on “Creating a GIF using HTML5’s Canvas

  1. Hello,

    First to say that I am so glad I found your blog. Your posts are awesome, I am not developer, but I like to read about new technology and I am really interested as I am webmaster.

    I read few of your posts about video to gifs and i like your tool. Then I found this post and can’t believe that I found this. Seems exactly what i looking for, but not sure.

    Can you tell me please, is this something like how http://gfycat.com/about work ? Please read little bit. They converted .gif files into html5 video and reduced size 16 times, and also have pause, slower, faster buttons.

    Is this what ur script do ?

    I would like to communicate with you via email or some IM (skype), so if you have time please add me on skype: ksifoking. If you are working freelance, I would pay you for some work.

    Waiting for your replay.

    Stefan

    • Not sure if you’re still looking for an answer to this question, but canvas is not the same as html5 video-tags. Canvas is able to do a lot more than just videos, you can even make games with it,it’s just really awesome 😀
      With a basic understanding of javascript you can get started yourself 🙂
      If you guys are already cooperating then that’s cool too^^

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s