Canvas

  • Revision slug: HTML/Canvas
  • Revision title: Canvas
  • Revision id: 41189
  • Created:
  • Creator: ilmarihei
  • Is current revision? No
  • Comment 29 words added

Revision Content

<canvas> is a new HTML element which can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions, create animations or even do real-time video processing.

Mozilla applications gained support for <canvas> starting with Gecko 1.8 (i.e. Firefox 1.5). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <canvas> from version 9 onwards, for earlier versions a page can effectively add support for it by including a script from Google's Explorer Canvas project. Google Chrome and Opera 9 also support <canvas>.

The <canvas> is also used by WebGL to do hardware-accelerated 3D graphics on web pages.

Documentation

Specification
The <canvas> element is part of the WhatWG Web applications 1.0 specification, also known as HTML 5.
Drawing Graphics with Canvas
A one-page introduction to <canvas>.
Canvas tutorial
A comprehensive tutorial covering both the basic usage of <canvas> and its advanced features.
Code snippets:Canvas
Some extension developer-oriented code snippets involving <canvas>.
Canvas examples
A few <canvas> demos.
Drawing text using a canvas
Documentation for the new <canvas> feature available starting with Firefox 3
Canvas cheat sheet

View All...

Community

* View Mozilla forums... {{ Template:DiscussionList|dev-tech-html|mozilla.dev.tech.html }}

Libraries

  • Processing.js is a port of the Processing visualization language
  • EaselJS is a library with a Flash-like API
  • PlotKit is a charting and graphing library

Related Topics

HTML, JavaScript, CSS, AJAX, DOM, SVG
Canvas DOM interfaces  

Categories

Interwiki Language Links

 {{ HTML5ArticleTOC() }}

{{ languages( { "zh-tw": "zh_tw/HTML/Canvas", "es": "es/HTML/Canvas", "fr": "fr/HTML/Canvas", "ja": "ja/HTML/Canvas", "pl": "pl/HTML/Canvas", "ko": "ko/HTML/Canvas","zh-cn": "cn/HTML/Canvas" } ) }}

Revision Source

<p><a href="/en/HTML/Element/canvas" title="en/HTML/Element/canvas">&lt;canvas&gt;</a> is a new <a href="/en/HTML" title="en/HTML">HTML</a> element which can be used to draw graphics via scripting (usually <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>). For example, it can be used to draw graphs, make photo compositions, create animations or even do real-time video processing.</p>
<p>Mozilla applications gained support for <code>&lt;canvas&gt;</code> starting with Gecko 1.8 (i.e. <a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>). The element was originally introduced by Apple for the OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> and Safari. Internet Explorer supports <code>&lt;canvas&gt;</code> from version 9 onwards, for earlier versions a page can effectively add support for it by including a script from Google's <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> project. Google Chrome and Opera 9 also support <code>&lt;canvas&gt;</code>.</p>
<p>The <code>&lt;canvas&gt;</code> is also used by <a href="/en/WebGL" title="en/WebGL">WebGL</a> to do hardware-accelerated 3D graphics on web pages.</p>
<table class="topicpage-table"> <tbody> <tr> <td> <h4 name="Documentation"><a href="/Special:Tags?tag=HTML:Canvas&amp;language=en" title="Special:Tags?tag=HTML:Canvas&amp;language=en">Documentation</a></h4> <dl> <dt><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">Specification</a></dt> <dd><small>The <code>&lt;canvas&gt;</code> element is part of the WhatWG Web applications 1.0 specification, also known as HTML 5.</small></dd> </dl> <dl> <dt><a href="/en/Drawing_Graphics_with_Canvas" title="en/Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></dt> <dd><small>A one-page introduction to <code>&lt;canvas&gt;</code>.</small></dd> </dl> <dl> <dt><a href="/en/Canvas_tutorial" title="en/Canvas_tutorial">Canvas tutorial</a></dt> <dd><small>A comprehensive tutorial covering both the basic usage of <code>&lt;canvas&gt;</code> and its advanced features.</small></dd> </dl> <dl> <dt><a href="/en/Code_snippets/Canvas" title="en/Code_snippets/Canvas">Code snippets:Canvas</a></dt> <dd><small>Some extension developer-oriented code snippets involving <code>&lt;canvas&gt;</code>.</small></dd> </dl> <dl> <dt><a href="/Special:Tags?tag=Canvas_examples&amp;language=en" title="Special:Tags?tag=Canvas_examples&amp;language=en">Canvas examples</a></dt> <dd><small>A few <code>&lt;canvas&gt;</code> demos.</small></dd> </dl> <dl> <dt><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">Drawing text using a canvas</a></dt> <dd><small>Documentation for the new <code>&lt;canvas&gt;</code> feature available starting with Firefox 3</small></dd> </dl> <dl> <dt><a class="external" href="http://simon.html5.org/dump/html5-canvas-cheat-sheet.html" title="http://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></dt> </dl> <p><span class="alllinks"><a href="/Special:Tags?tag=HTML&amp;language=en" title="Special:Tags?tag=HTML&amp;language=en">View All...</a></span></p> </td> <td> <h4 name="Community">Community</h4> <p><span class="comment">* View Mozilla forums... {{ Template:DiscussionList|dev-tech-html|mozilla.dev.tech.html }}</span></p> <ul> <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Canvas-Developers Yahoo Group</a></li> </ul> <h4 name="Related_Topics">Libraries</h4> <ul> <li>Processing.js is a port of the Processing visualization language</li> <li>EaselJS is a library with a Flash-like API</li> <li>PlotKit is a charting and graphing library</li> </ul> <h4 name="Related_Topics">Related Topics</h4> <dl> <dd><a href="/en/HTML" title="en/HTML">HTML</a>, <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/CSS" title="en/CSS">CSS</a>, <a href="/en/AJAX" title="en/AJAX">AJAX</a>, <a href="/en/DOM" title="en/DOM">DOM</a>, <a href="/en/SVG" title="en/SVG">SVG</a></dd> </dl> </td> </tr> <tr> <td><a href="/en/Gecko_DOM_Reference#Canvas_Interfaces" title="en/Gecko_DOM_Reference#Canvas_Interfaces">Canvas DOM interfaces</a></td> <td> </td> </tr> </tbody>
</table>
<p><span class="comment">Categories</span></p>
<p><span class="comment">Interwiki Language Links</span></p>
<p> {{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "zh-tw": "zh_tw/HTML/Canvas", "es": "es/HTML/Canvas", "fr": "fr/HTML/Canvas", "ja": "ja/HTML/Canvas", "pl": "pl/HTML/Canvas", "ko": "ko/HTML/Canvas","zh-cn": "cn/HTML/Canvas" } ) }}</p>
Revert to this revision