Canvas element
The canvas element is a third-party, non-standard extension to the HTML standard that allows for dynamic rendering of scriptable bitmap images.
It was initially introduced by Apple for use inside their own Mac OS X Webkit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers (notably Mozilla and Firefox) and standardized by the WHATWG working group on new proposed specifications for next generation web technologies. Preliminary support is also present in the Opera browser's 9.0 preview 1 builds [1]. Novell manufactures a plugin enabling in Internet Explorer XForms processing and offering along the way an implementation of canvas functionalities [2].
Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, and image composition.
Reactions
At the time of its introduction the canvas element met with mixed reactions from the web standards community. Some complained about Apple's decision to create a new proprietary element instead of supporting SVG, which still has not achieved broad web acceptance. Some others argued about the logic upon which canvas was conceived: being completely procedural and not having a descriptive counterpart allowed canvas to 'paint', but drawn elements are not identifiable in a DOM-like way. Other people raised concerns, not about the proprietary extension per se, but in regard to the proposed syntax for those elements. For example, the absence of a namespace indication [3] is undesirable.
A web developer unsatisfied by the level of SVG support in Safari has pushed himself to develop a SVG Tiny 1.2 to canvas rasteriser in JavaScript, as a proof of concept against claims that canvas was a lot easier to implement in Safari than a complete SVG integration [4].
Notes
- ^ Opera 9.0 preview 1 release notes
- ^ Novell XForms Explorer
- ^ Ian Hickson remarks regarding canvas and others Apple extensions to HTML
- ^ canvaSVG Javascript object for rendering SVG documents in canvas
Examples
- Canvascape - A 3D game implemented with Canvas.
- Various demos - Various canvas demos (a chart, a live server monitor, a Lindenmayer system implementation)
- Fractals - Mandelbrot and Julia fractals
- Fractals - A more complex example of fractals rendering
- Animation - A Flash-like simple animation
- Frames - Drawing decorative bordes around standard HTML elements
- Tucanos - The infamous tucanos demo
- Free drawing - Free drawing example