Core HTML5 Canvas

by David Geary

Not Just Games


When I started learning Canvas, I spent a lot of time on animations and games, primarily because it was the first thing that came to mind and because it’s fun.

One of the first examples I wrote was similar to example-1.8 from Core HTML5 Canvas:

A Canvas-based component

Example 1-8 (click on the image to run the example)

When I wrote the bouncing balls example, I had to figure out how to get the DIV with the Start/Stop button to float above the Canvas. In general, I had to figure out how to use HTML components in conjunction with a Canvas.

Then I started thinking about the inverse: using Canvas-based components in an HTML5 application. For example, here’s an HTML5 application that displays an image:

A Canvas-based component

Example 10-10 (click on the image to run the example)

The preceding example also has three Canvas-based custom controls: two sliders and an image panner.

A canvas is an HTML element that’s an interactive bitmap you can program. That means you can implement any kind of imaginable control with a canvas and use it in any HTML5 application.

It’s also easy to broadcast events from a Canvas-based control to interested parties. For example, when you adjust the image panner’s sliders in the preceding example, the sliders fire events to a listener in the application that modifies the properties of the image panner control (by changing its size or opacity). So in this case, we have one Canvas-based control (slider) that communicates with another control (image panner) to manipulate an ordinary HTML element (an image).

Feel free to download the code for the image panner example to see how I package the controls and reuse them.

Are you implementing custom controls with Canvas? If so, I’d like to hear about it. Relegating Canvas to games is a shame. HTML5’s most versatile element can do a lot more.

Advertisements

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

%d bloggers like this: