canvas tutorial

Jump to: navigation, search

Introduction to Canvas



Summary

<canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript). It can, for instance, be used to draw graphs, make photo compositions or do simple (and not so simple) animations.

<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari and Google Chrome. Gecko 1.8-based browsers, such as Firefox 1.5, also support this element. The <canvas> element is part of HTML5.

This tutorial describes how to implement the <canvas> element in your HTML pages. The examples provided should give you some clear ideas what you can do with <canvas> and can be used to start building your own implementations.

Before you start

Using the <canvas> element isn't very difficult but you do need a basic understanding of HTML and JavaScript.

The <canvas> element isn't supported in some older browsers, but is supported in Chrome 4 and later, Firefox 1.5 and later, Internet Explorer 9 and later, Opera 9 and later, and Safari 3.1 and later.

In this tutorial


Next >>



Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related articles

Canvas






  • Introduction to Canvas

Attribution

This article contains content originally from external sources, including ones licensed under the CC-BY-SA license. cc-by-sa-small-wpd.png

Portions of this content copyright 2012 Mozilla Contributors. This article contains work licensed under the Creative Commons Attribution-Sharealike License v2.5 or later. The original work is available at Mozilla Developer Network: Article