Canvas (HTML element)
Encyclopedia : C : CA : CAN : Canvas (HTML element)
The canvas element is an 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. Support is also present in the Opera 9.0 browser [#endnote_opera9]. Novell manufactures a plugin enabling in Internet Explorer XForms processing and offering along the way an implementation of canvas functionalities [#endnote_novell_xforms]. Independent efforts [#endnote_vml_canvas] to support the canvas feature on Internet Explorer do not require plugins and are based solely on VML and JavaScript. Google has also begun a project to add canvas abilities to Internet Explorer [#endnote_google_canvas] using the same techniques.
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, they consider the absence of a namespace indication [#endnote_Ian_Hickson] to be undesirable.A web developer unsatisfied by the level of SVG support in Safari has pushed himself to develop an 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.[#endnote_canvaSVG]
Notes
- ↑ [Opera 9.0 changelog]
- ↑ [Novell XForms Explorer]
- ↑ [Canvas in IE]
- ↑ [Google's Canvas in IE project]
- ↑ [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.
- [Fractals] - An example of fractals rendering
- [Animation] - A Flash-like simple animation (WARNING, may crash your browser)
- [Frames] - Drawing decorative borders around standard HTML elements
- [Tucanos] - The tucanos demo
- [Free drawing] - Free drawing example
- [Conway's Game of Life] - the widely-known cellular automaton implemented using Canvas.
- [Canvas Pong] - A pong recreation using the canvas tag.
- [Canvas Painter] - A simple canvas-based paint demo using widgets.
- [Canvas plasma demo] - Simple port of a C plasma demo
- [Breakout using canvas] -The classic game, Breakout, using the canvas tag.
See also
External links
- [Canvas description in WHATWG Web Applications draft specifications]
- [Canvas reference page in Apple Developers Connection]
- [Canvas tutorial and introductory page on Mozilla Developer center]
From Wikipedia, the Free Encyclopedia. Original article here. Support Wikipedia by contributing or donating.
All text is available under the terms of the GNU Free Documentation License See Wikipedia Copyrights for details.