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.
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:
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.
- Posted in: HTML5 Canvas components