About

What is <canvas>?

The canvas element is a drawable region defined in HTML code with height and width attributes. JavaScript code can access the canvas through a full set of drawing functions allowing for dynamically generated graphics. The canvas element was introduced in HTML5. You can read more about the <canvas> element at the following locations:

Which browsers support Canvas?

  • Mozilla Firefox
    Latest stable release: 5
    Firefox has quickly established itself as a healthly competitor to Internet Explorer. It has supported canvas in some capacity since version 1.5; and as of 3.5 it has become a leader of the HTML5 revolution. As well as being simple to use, Firefox is very extendable and Firefox’s biggest benefits for developers come in the form of extensions – Firebug being particuarly useful for debugging JavaScript code and editing HTML and CSS on the fly.

    Download

  • Google Chrome
    Latest stable release: 12
    Google’s entry in to the browser market also uses the Webkit rendering engine which means it also supports canvas. As an additional bonus, Google developed their own JavaScript V8 engine which at the time of writing is the fastest JavaScript engine out there.

    Download

  • Apple Safari
    Latest stable release: 5
    Safari uses the Webkit rendering engine which has supported the canvas element since version 2. From version 3, Safari has worked on both Macs and Windows machines. Each version of Safari brings with it huge increases in JavaScript performance, and with all the browsers now competing for speed developing canvas applications never seemed so popular.

    Download

  • Opera
    Latest stable release:
    11
    Opera’s development team have taken a special interest in the canvas element and the browser is quite advanced in what it can do with the element, even allowing users to save canvas demos as Opera widgets.

    Download

  • Microsoft Internet Explorer
    Latest stable release:
    9
    When it comes to HTML5 and the canvas element, Internet Explorer is the thorn in our flesh as up until version 8 the browser does not support these newer features natively. Thankfully, version 9 supports the 2D context of canvas; and there are people out there who have developed solutions to the canvas support problem for older versions of IE.

    • ExCanvas is a simple script that can be added to the top of a page and will allow IE to handle the HTML5 canvas specification.Download ExCanvas
    • IECanvas is an ActiveX implementation of canvas.Download InCanvas

    It’s up to the developer not the user as to whether they choose to include one of these scripts with their demo; so canvas support for Internet Explorer is varied.

    Download

What is Canvas Demos?

With a growing range of browser support, technical demos and tutorials for the element are on the rise. This site provides a hub for quick access to some of the best demos and tutorials on the web. Please note we do not create the demos or tutorials. If you have any questions or have found a bug, please contact the demo author.

How can I submit my canvas game, application, demo, tool or tutorial?

Use the contact form to let us know about your demo or tutorial. We welcome all contributions, and if we like it we’ll add it to the site for others to see!