Virtual HTML Canvas

What exactly is going on here?

This page contains a single HTML5 Canvas Element. For those new to this technology, a canvas element is a rectangle of pixels upon which can be drawn various lines, shapes and images using javascript. Most of the demos on stevebob.net such as 3dtesla and fractbox use canvas elements to display graphics. On the left of the page are two apps which have been ported from canvas to virtual canvas. This allows the two apps to be displayed on the same canvas element.

How does it work?

The images on a regular canvas element are manipulated using javascript methods, called on an object associated with the element. A virtual canvas is a wrapper for a canvas element. Currently, only a small subset of canvas methods are implemented for virtual canvas. Only lines and rectangles can be drawn. Each virtual canvas has a location, size and rotation. The virtual canvas object can be treated as a regular canvas object. Note that there are still some problems to work out, such as the graphics overflowing the bounds of their allocated space (notice how the lighting doesn't stay in its rectangle).

...and this is useful because...

In order for a canvas app to have some purpose and not be just a demo or display area for a larger, non-canvas app, the user interface needs to be separated into multiple parts. For instance, there might be some buttons or other controls or maybe an area for text or graphics. These are logically separate components of the visual aspect of a web application, and as such should be separated by some mechanism. One such mechanism is using multiple canvas elements, positioned using CSS. Virtual Canvas objects provide another such mechanism.

Porting Demos

The first section mentions porting demos from canvas to virtual canvas. Only a small amount of code needed to be changed to make these demos work side by side in virtual canvas. Namely, conflicting variable and function names had to be changed (since when these demos were written they were not intended to be run simultaneously), and the assignment statement for the canvas object was replaced with an assignment statement for a virtual canvas object. Because these demos only draw lines and rectangles, the methods that were being called on a canvas object are now being called on a virtual canvas object and it is taking care of translation, rotation and scaling.