Blog

Code Experiment: Converting Canvas Animations To Gifs

I thought I’d attempt a fun experiment where I show how I method fixing an issue. The thought here is you possibly can see how I work and how messy it’s. At every step of the way, I’ll show the code I was working with, even when it was messy. These are in the form of Glitch “remixes”, basically easily creating a brand-new copy at every step so the old one has what I was doing before.

You’ll notice plenty of code that makes very little sense. A lot of code commented out. And lots of console.log. That is basically how I be taught something I’m unfamiliar with. By poking round and seeing what occurs. Recently I inherited a project with a reasonably easy premise. Or no less than I assumed so. The concept was to take an animation on the HTML canvas and switch it right into a cool animated gif. That means you could easily share it on social media. Full disclosure I don’t know anything about canvas animation except that it exists. Turns out there are loads I do not know. Also turns out that browsers do not really want you to do that?

I should have remembered this glorious article The GIF Is Dead. Long Live the GIF. The purpose of it is that web requirements sticklers have been attempting to bury the gift for ages. So they are not exactly eager to build in is making talents to web browsers. But there are some cool things inbuilt to net browsers that I suppose are meant to tempt me to abandon life.

One is the MediaRecorder Web API. A lot of people appear to make use of it for webcam recording, but I could not discover many examples that utilized canvas animations. I found one on GitHub called WebRTC samples Record stream from a canvas. It’s using a 3d instance but I wanted to use some 2d animation so I ported it to Glitch and tried it out.

Next I stumbled upon this simpler CanvasRecorder implementation on GitHub. I loved it because it actually was just one easy readable implementation of the idea. Record a canvas to web video without effecting rendering performance. It is based on this WebRTC sample. Captures MediaStream from a canvas aspect and information it with MediaRecorder. Ah now that’s a terrific example!

  1. Build a Pressure Relief Valve
  2. Know Your Daily Rate
  3. Empowering job seekers with ideas and guidance in order that they gain speedy advantages
  4. Removing the Member Login
  5. More company personnel are concerned in the method
  6. Click the choice to establish the new connection to your server
  7. How do I contact you

As simple as possible so you may understand it easily and play round with it. And it labored nice. Oh, just kidding. It makes a web not a gif. The online standards individuals really love the web but I’m undecided anybody has gotten the memo. You cannot share them on Twitter.

Oh, and it does not work in Safari at all. I detoured a bit here exploring Giphy’s API, needs to be able to converting web to a gig since the site is. It additionally has good social sharing options. But that does not clear up the Safari or cellular situation. I also learned the onerous way that the add and will not take web. If I ever have to record an A-frame WebVR scene I’ve got a start here.

So, on to numerous other “options”. Gif.js appears Ok. But a number of the examples I want to make use of our in CoffeeScript and I really just can’t read them very simply. As I mentioned, I prefer it when examples are easy and in simply plain ol’ JavaScript. It’s more probably people are utilizing JavaScript than CoffeeScript.