Then I came across something new. The CANVAS element. New in the Web Application 1.0 Specification that describes the successor to HTML4 and XHTML1. A specification that browsers like Firefox, Safari and Opera take their lead from. And perhaps Internet Explorer as well???
Web Application 1.0 Specification
A little citation from the Web App specification:
have managed to base entire businesses on them. What is required are
extensions to these technologies to provide much-needed features such as:
- Native pop-up menus and context menus.
- Inline markup for pop-up windows, for example for dialog boxes or tool
palettes, so that dialogs need not be defined in separate files.
- Command updating: applications that have several access points for the
same feature, for instance a menu item and a tool-bar button, would
benefit from having to disable such commands only once, instead of having
to keep each access point synchronized with the feature’s availability at
all times. Similarly menu items or tool-bar buttons that represent a
toggle state could automatically stay synchronized whenever toggled.
- Server-sent events: triggering DOM3 Events from the server-side, for
example for tickers or status updates.
- Client-server communications methods that do not require page loads,
enabling on-demand data retrieval (where the UA automatically fetches
data from the server as required), remote procedure calls (where script
can invoke code on the server side and get an XML fragment in return),
- More device-independent DOM events: The DOM event set needs
device-independent events, such as events that fire when a button or link
is activated, whether via the mouse or the keyboard.
DOMActivateis a start, but it lacks equivalent HTML
attributes, and additional events may be needed.
- Sortable and multicolumn tree views and list views with rich
- Rich text editing: an underlying architecture upon which
domain-specific editors can be created, including things like control
over the caret position.
- A predefined HTML editor based on the rich text editing architecture.
- Drag and drop APIs.
- Text selection manipulation APIs.
- Clipboard APIs (if the security and privacy concerns can be
So that is what the future of browsers looks like!
The new CANVAS element
Here is a very simple example of using the CANVAS element. Its output looks like this:
The function draw() gets hold of the canvas and its rendering-context. It then sets the fillStyle and creates a Rectangle with that fillStyle, changes the fillStyle and creates another rectangle – which is actually a square.
Bonus feature: take clips of the browser window
Mozilla’s canvas is extended with the drawWindow method. This method draws a snapshot of the contents of a DOM window into the canvas. For example,
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)");
would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a black background, into the canvas. With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.
Creating Charts and Graphs using CANVAS
One example of a bar chart done using CanvasGraph.js:
CANVAS in Internet Explorer
Web Applications 1.0 Working Draft â€” 12 January 2006 This specification represents a new version of HTML4 and XHTML1, along with a new version of the associated DOM2 HTML API. Migration from HTML4 or XHTML1 to the format and APIs described in this specification should in most cases be straightforward, as care has been taken to ensure that backwards-compatibility is retained.
Canvas Element – overview page on Mozilla Developer Center
Drawing Graphics with Canvas – Introduction of the new HTML 1.5 CANVAS element
Canvas Tutorial on Mozilla Developer Center
3D Walker game – demonstration of the SCAPE element in a sort of Maze Game (requires Firefox 1.5)
There’s also some work I did on SVG/VML drawing at xdraw.org, along with my OSCON 2006 slides on various browser graphics techniques.
Developed by Walter Zorn and to be found at
It works by painting pixels as DIVs with a colored background. For heavy duty graphics stuff, it will be very slow. But for simple things like a line, a circle or even a simple graph it will do the job.
Comments are closed.