Canvas

This is an overview where we're at in the Canvas technology that's part of the HTML5 specification. Canvas is a way to use vector graphics in a web page, in short it's a html tag <canvas> that uses javascript to draw vector graphics dynamically and it renders in the containing canvas tag in browsers that support it.
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.

Browser support

Safari 1.3+
Firefox 1.5+
Opera 9+
Google Chrome
iPhone

Later versions of FF and Opera has better support.

Where is the Canvas technology used, and what limitations are there?

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. 

There's still a problem to use it in live projects though as Internet Explorer still has no support of the Canvas tag or javascript functions. There are some hacks to get the code to work anyway like Explorer Canvas and Flash Canvas (see also Cross Browser Support), but they all depend on other technologies.

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.

Canvas and 3D

For now the browsers only support rendering context of 2D, but the api for canvas makes it possible to choose 3D instead.  Example javascript code:

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

Two major plugins for 3D exists, Google O3D and a Firefox addon called Canvas 3D to make OpenGL to work in a browser, but recent Firefox nightly builds also includes a native support for OpenGL built upon that -  WebGL. Opera also have experimental builds with Open GL support. The plugins and support works as a bridge between javascript and the internal graphics of the computer making it faster - and most often OpenGL (mentioned as a supposed 3D engine in the HTML5 specification). Also Googles O3D can be used with their fast javascript engine V8 which is faster than the other engines at the time of writing.

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.

Links and examples

Specification

Whatwg:
http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element

W3C
http://dev.w3.org/html5/html-author/#the-canvas-element
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html

Accessibility discussion
http://esw.w3.org/topic/HTML/AddedElementCanvas

Libraries

Canvas 3D JS Libary (C3DL) http://www.c3dl.org/
Javascript library that makes it easier to build 3d applications with Firefox Canvas 3D add-on (that provides access to OpenGL ES 2.0-like APIs via the HTML Canvas)
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 + 

Processing.js http://processingjs.org/
Compatible: Firefox, Safari, Opera, Chrome, also with Internet Explorer if you use Explorer Canvas (http://code.google.com/p/explorercanvas/).

Pre3d http://deanm.github.com/pre3d/ Javascript 3d rendering engine
Burst Engine http://www.hyper-metrix.com/#Burst Open Source vector animation engine

Protovis http://vis.stanford.edu/protovis/ visualization library


SVGweb http://code.google.com/p/svgweb/ SVG Web is a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari. Using the library plus native SVG support you can instantly target ~95% of the existing installed web base.

Cross Browser Support

ExplorerCanvas: http://code.google.com/p/explorercanvas/
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

Examples

Simulated 3D with 2d context 
http://www.tapper-ware.net/canvas3d/
http://www.benjoffe.com/code/demos/canvascape/

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)
http://gyu.que.jp/jscloth/

http://acko.net/files/bacon/animation-demo.html

Mario Cart game http://www.nihilogic.dk/labs/mariokart/

Monster Demo
http://www.chromeexperiments.com/detail/monster/

2D

Physics engines & particle examples:
http://blobsallad.se/ 
http://balldroppings.com/js/
http://nerget.com/fluidSim/
http://iterationsix.com/

Drawing fractals:
http://azarask.in/projects/algorithm-ink/

Fireworks demo:
http://js-fireworks.appspot.com/

Flying through stars:
http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html

MS Paint clone in Canvas:
http://canvaspaint.org/

More examples:
http://processingjs.org/exhibition

Video green screen test (FF, Safari):
https://developer.mozilla.org/samples/video/chroma-key/index.xhtml

Real world, stock market:
http://igrapher.com/

3D Renderers

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)

Tutorials

https://developer.mozilla.org/en/Canvas_tutorial (by Mozilla)
http://billmill.org/static/canvastutorial/

See also canvas demos: clip image as a superellipse and basic drag&drop

Creative Commons License
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.

Last update 2009-11-18 by Elin Tjerngren, Artopod