Canvas tutorial

  • Revision slug: Canvas_tutorial
  • Revision title: Canvas tutorial
  • Revision id: 2505
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment

Revision Content

Under construction
This page is in the process of being written as of september 5th 2005.

<canvas> is a new HTML element which can be used to draw bitmap graphics using scripting. It can for instance be used to draw graphs, make photo compositions or do simple animations. The image on the right shows some examples of <canvas> implementations which we will see later in this tutorial.

<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari. Gecko 1.8-based browsers, such as Firefox 1.5, also support this new element. The <canvas> element is part of the WhatWG Web applications 1.0 specification also known as HTML 5.

In this tutorial I will try to describe how to implement the <canvas> element in your own 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.

As stated above, the <canvas> element isn't supported in all modern browser so you will need Firefox 1.5 or Safari to see all the examples in action.

In this tutorial

Revision Source

<div class="callout-box"><b>Under construction</b><br>
<small>This page is in the process of being written as of september 5th 2005.</small></div><img align="right" src="File:en/Media_Gallery/Canvas_tut_examples.jpg">
<p><code>&lt;canvas&gt;</code> is a new <a href="en/HTML">HTML</a> element which can be used to draw bitmap graphics using scripting. It can for instance be used to draw graphs, make photo compositions or do simple animations. The image on the right shows some examples of <code>&lt;canvas&gt;</code> implementations which we will see later in this tutorial.
</p><p><code>&lt;canvas&gt;</code> was first introduced by Apple for the <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> and later implemented in Safari. <a href="en/Gecko">Gecko</a> 1.8-based browsers, such as Firefox 1.5, also support this new element. The <code>&lt;canvas&gt;</code> element is part of the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> specification also known as HTML 5.
</p><p>In this tutorial I will try to describe how to implement the <code>&lt;canvas&gt;</code> element in your own HTML pages. The examples provided should give you some clear ideas what you can do with &lt;canvas&gt; and can be used to start building your own implementations.
</p>
<h4 name="Before_you_start"> Before you start </h4>
<p>Using the <code>&lt;canvas&gt;</code> element isn't very difficult but you do need a basic understanding of <a href="en/HTML">HTML</a> and <a href="en/JavaScript">JavaScript</a>.
</p><p>As stated above, the <code>&lt;canvas&gt;</code> element isn't supported in all modern browser so you will need Firefox 1.5 or Safari to see all the examples in action.
</p>
<h4 name="In_this_tutorial"> In this tutorial </h4>
<ul><li> <a href="en/Canvas_tutorial/Basic_usage">Basic usage</a>
</li><li> <a href="en/Canvas_tutorial/Drawing_shapes">Drawing shapes</a>
</li><li> <a href="en/Canvas_tutorial/Using_images">Using images</a>
</li><li> <a href="en/Canvas_tutorial/Applying_styles_and_colors">Applying styles and colors</a>
</li><li> <a href="en/Canvas_tutorial/Transformations">Transformations</a>
</li><li> <a href="en/Canvas_tutorial/Compositing">Compositing</a>
</li></ul>
Revert to this revision