See also canvas demos: clip image as a superellipse and basic drag&drop and in the links below, some tutorials, libs and terrific examples - dont miss blobsallad for example.
Later versions of FF and Opera has better support.
The Canvas technology was first developed by Apple to use in it's Mac OSX Dashboard Widgets, and was built into their Webkit engine that Safari is built upon. Firefox (Gecko engine) and Opera followed later on to support Canvas. Opera's browser widgets also use this technology.
Now it's part of the Whatwg HTML5 proposal, and as of March 2009 it's also added to a new W3C draft of HTML5. At Google I/O conference in may 2009 they announced their support for HTML5 and showed examples of the possibilities of Canvas.
Canvas can either be used as a container for games, images, graphs - but theres also implementations where it's used as a small part of a webpage just like image graphics can be used, for example in the Open Jacob Draw2D Library where mindmaps can be built - where it's mostly regular html and just the vector based images is canvas. An implementation that is spreading fast is Cufon where text can be replaced by the right font on any web browser even if the right font is not available (uses Canvas, and VML for Internet Explorer). Note that the HTML5 spec contains recommendations against that use "it is inappropriate to use a canvas element to render a page heading". There's still a lot of discussion how to make Canvas more accessible.
For now the browsers only support rendering context of 2D, but the api for canvas makes it possible to choose 3D instead.
var canvasnode=document.getElementById("mycanvasid"); // reference to the canvas html node
var context=canvasnode.getContext("2d"); // get the 2D context, the object used for rendering
There are also experiments that use the 2D context, and making 3D out of what exists, see this post and try out the demos (works best in Chrome). See more links below, and be sure to read Yusuke Kawasaki's History of 3D Canvas.
Canvas 3D JS Libary (C3DL)
The Canvas 3D project aims to add support for low-level hardware accelerated ( where possible) 3D rendering via the HTML canvas element.
Compatible: Firefox 3.5 +
Compatible: Firefox, Safari, Opera, Chrome, also with Internet Explorer if you use Explorer Canvas (http://code.google.com/p/explorercanvas/).
Burst Engine http://www.hyper-metrix.com/#Burst Open Source vector animation engine
Protovis http://vis.stanford.edu/protovis/ visualization library
One using SVG (Scalable Vector Graphics): http://me.eae.net/archive/2005/12/29/canvas-in-ie/
FlashCanvas - using Flash as a bridge: http://www.azarask.in/blog/post/flash-canvas/
The folks at Cappuccino use combinations of various Technologies to accomplish what canvas can do on all browsers. http://cappuccino.org ( http://280slides.com is an example of this.)
Canvas via Silverlight: http://ajaxian.com/archives/canvas-via-silverlight-again
Simulated 3D with 2d context
Canvas3d + Flickr: http://www.xs4all.nl/~peterned/3d/
Rotating cube: http://www.pascarello.com/canvas/KeyBoard3DCube.html
More rotating 3D stuff: http://www.godlikemouse.com/3d.xhtml
http://gyu.que.jp/jscloth/touch.html (also contains tests for O3D and moz addon)
Mario Cart game http://www.nihilogic.dk/labs/mariokart/
Physics engines & particle examples:
Flying through stars:
MS Paint clone in Canvas:
Video green screen test (FF, Safari):
Real world, stock market:
O3D - open-source web API by Google for creating rich, interactive 3D applications in the browser (plugin): http://code.google.com/apis/o3d/
Canvas 3D - Mozilla's version based on OpenGL ES (OpenGL for embedded systems)
https://developer.mozilla.org/en/Canvas_tutorial (by Mozilla)
See also canvas demos: clip image as a superellipse and basic drag&drop
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.
Last update 2009-11-18 by Elin Tjerngren, Artopod