Canvas tutorial

  • Revision slug: Canvas_tutorial
  • Revision title: Canvas tutorial
  • Revision id: 2554
  • Created:
  • Creator: Romanov
  • Is current revision? No
  • Comment Reverted to earlier version; 11 words added, 5 words removed; page display name reset to default

Revision Content

<canvas> is a new 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. 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 and Google Chrome. Gecko 1.8-based browsers, such as Firefox 1.5, also support this 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.

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

In this tutorial

See also

{{ Next("Canvas tutorial:Basic usage") }}

{{ languages( { "es": "es/Canvas_tutorial", "zh-tw": "zh_tw/Canvas_教學", "fr": "fr/Tutoriel_canvas", "ja": "ja/Canvas_tutorial", "ko": "ko/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "zh-cn": "cn/Canvas_tutorial", "ru": "ru/\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435_canvas" } ) }}

Revision Source

<p><img align="right" alt="" class=" internal" src="/@api/deki/files/115/=Canvas_tut_examples.jpg"><strong><code><a href="/en/HTML/Canvas" title="en/HTML/Canvas">&lt;canvas&gt;</a></code></strong> is a new <a href="/en/HTML" title="en/HTML">HTML</a> element which can be used to draw graphics using scripting (usually <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>). It can for instance be used to draw graphs, make photo compositions or do simple (and <a href="/en/A_Basic_RayCaster" title="en/A_Basic_RayCaster">not so simple</a>) 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 Mac OS X Dashboard and later implemented in Safari and Google Chrome. <a href="/en/Gecko" title="en/Gecko">Gecko</a> 1.8-based browsers, such as Firefox 1.5, also support this 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>
<h3 name="Before_you_start">Before you start</h3>
<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" title="en/HTML">HTML</a> and <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>.</p>
<p>The <code>&lt;canvas&gt;</code> element isn't supported in some older browsers, but is supported in Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and Internet Explorer 9.</p>
<h3 name="In_this_tutorial">In this tutorial</h3>
<ul> <li><a href="/en/Canvas_tutorial/Basic_usage" title="en/Canvas_tutorial/Basic_usage">Basic usage</a></li> <li><a href="/en/Canvas_tutorial/Drawing_shapes" title="en/Canvas_tutorial/Drawing_shapes">Drawing shapes</a></li> <li><a href="/en/Canvas_tutorial/Using_images" title="en/Canvas_tutorial/Using_images">Using images</a></li> <li><a href="/en/Canvas_tutorial/Applying_styles_and_colors" title="en/Canvas_tutorial/Applying_styles_and_colors">Applying styles and colors</a></li> <li><a href="/en/Canvas_tutorial/Transformations" title="en/Canvas_tutorial/Transformations">Transformations</a></li> <li><a href="/en/Canvas_tutorial/Compositing" title="en/Canvas_tutorial/Compositing">Compositing</a></li> <li><a href="/en/Canvas_tutorial/Basic_animations" title="en/Canvas_tutorial/Basic_animations">Basic animations</a></li>
</ul>
<h3 name="See_also">See also</h3>
<ul> <li><a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas topic page</a></li> <li><a href="/en/Drawing_Graphics_with_Canvas" title="en/Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li> <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas Demos - Games, applications, tools and tutorials</a></li> <li><a href="/Special:Tags?tag=Canvas_examples&amp;language=en" title="Special:Tags?tag=Canvas_examples&amp;language=en">Canvas examples</a></li> <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">interactive canvas tutorial</a></li> <li><a class=" external" href="http://www.selfhtml5.org/wp-content/uploads/2010/07/HTML5_Canvas_Cheat_Sheet.png" title="http://www.selfhtml5.org/wp-content/uploads/2010/07/HTML5_Canvas_Cheat_Sheet.png">Canvas Cheat Sheet with all attributes and methods</a></li> <li><a class=" external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li> <li><a class=" external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
</ul>
<p>{{ Next("Canvas tutorial:Basic usage") }}</p>
<p>{{ languages( { "es": "es/Canvas_tutorial", "zh-tw": "zh_tw/Canvas_教學", "fr": "fr/Tutoriel_canvas", "ja": "ja/Canvas_tutorial", "ko": "ko/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "zh-cn": "cn/Canvas_tutorial", "ru": "ru/\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435_canvas" } ) }}</p>
Revert to this revision