matthew ephraim

Introducing Candid Canvas

The Canvas Tag

If you’re a web developer (or even mildly interested in the world of web development) you’ve probably heard of HTML5’s new Canvas tag. You’re probably also aware that the Canvas tag allows web developers to create some really great animations right in the browser. No plugins needed (well, depending on your browser, maybe one plugin).

As soon as I saw what was possible with the Canvas tag, I wanted to start using it myself. So, I looked at some of the Canvas tutorials available online and figured out how to create some simple drawings. It was fun, and simple, and I was happy.

And then I decided to try my hand at creating some Canvas animations.

The Problem

Now, I’m not a Canvas expert, so my analysis could be way off base, but I quickly came to the conclusion that creating a Canvas animation could be quite difficult. It’s fairly easy to do if your animation only has a few elements. And it’s manageable if you don’t mind having a lot of extra code for handling the animation’s timing and state variables. But, as time went on, I found that even simple animations became difficult to manage very quickly. My hat’s off to the developers that have created some of the more complex Canvas animations out there. I don’t know how you do it.

My first instinct when I began to run into problems with the Canvas animations I was trying to create was to look for a Canvas animation library that might help me out. It turns out that there are a few out there. Unfortunately, I didn’t find one that I felt fit well with the kinds of animations I wanted to create.

And so, with a stack of problems I intended to solve, I set out to create a Canvas animation library that would solve each and every one of them.

Candid Canvas

What I came up with was a new Canvas animation library that I call Candid Canvas.

  • Unlike several of the other Canvas animation libraries out there, Candid Canvas doesn’t provide you with any special drawing tools. You’re still on your own when it comes to drawing your animation.
  • Candid Canvas also doesn’t keep track of the elements that have been drawn to the Canvas tag. You’re on your own for that too.
  • Candid Canvas is intended to help you manage the parts of creating a Canvas animation related to, well…animating it.
  • Candid Canvas helps you break down your animation into separate scenes.
  • And it helps you break your scenes down into individual elements responsible for drawing different pieces of the scene.
  • Candid Canvas also helps you play, pause and reset your animation.

Candid Canvas is not a library for everyone. But if you’re looking for a little extra help when creating Canvas animation, I hope that Candid Canvas will work for you!

Download, contribute and submit bugs and feature requests at the Candid Canvas Github project.