matthew ephraim

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.

I’ve been using the Raphaël JavaScript library a lot lately for a JavaScript SVG project I’ve been working on. It’s easy to use and eases a lot of the pain of using JavaScript with SVG. However, I eventually came to a point where I needed to have SVG elements that could be dragged around on the Raphael canvas. After looking around for a good plugin that would allow me to do what I wanted, I decided that I needed to write my own. The result is the raphael.draggable plugin.

raphael.draggable is fairly straightforward to use. You simply need to call the draggable.enable() on the raphael object you would like to enable the plugin for. raphael.draggable works for all raphael elements and for raphael sets as well. Sets that have raphael.draggable enabled will drag all elements in the set whenever any element in the set is dragged.

Using the raphael.draggable plugin

 // Creating a canvas and enabling draggable for it
var paper = Raphael(0,0, 800, 600);
paper.draggable.enable();

// Creating a rectangle element and enabling draggable for it
var rect = paper.rect(0, 0, 100, 100);
rect.attr({ 'fill': 'white' });
rect.draggable.enable();

// Creating a set and enabling draggable for it
var set = paper.set();
set.draggable.enable();
set.push(rect);

Currently, raphael.draggable has only been tested for Firefox and Safari. Those are the only two browsers I needed to test it for. Source code and documentation are available on github. Constructive criticism, and especially constructive contributions to the code are welcome!