Canvas

  • Revision slug: HTML/Canvas
  • Revision title: Canvas
  • Revision id: 41195
  • Created:
  • Creator: asci
  • Is current revision? No
  • Comment Add libCanvas to Libraries; 7 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 of IE, a page can effectively add support for <canvas>  by including a script from Google's Explorer Canvas project. Google Chrome and Opera 9 also support <canvas>.

 

<meta charset="utf-8"/>

The <canvas> element 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 }}

Resources

Libraries

  • libCanvas is powerful and lightweight canvas framework
  • 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
  • Kapi is an animation keyframing API for Canvas
  • PhiloGL is a WebGL framework for data visualization, creative coding and game development.
  • JavaScript InfoVis Toolkit creates interactive 2D Canvas data visualizations for the Web.

Related Topics

HTML, JavaScript, CSS, AJAX, DOM, SVG, WebGL
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 of IE, a page can effectively add support for <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit; ">&lt;canvas&gt;</code>  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> </p>
<p>&lt;meta charset="utf-8"/&gt;</p>
<p>The <code>&lt;canvas&gt;</code> element 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">Resources</h4> <ul> <li><a class="external" href="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">HTML5 Canvas Deep Dive</a></li> </ul> <h4 name="Related_Topics">Libraries</h4> <ul> <li><a class=" external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework</li> <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> is a port of the Processing visualization language</li> <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> is a library with a Flash-like API</li> <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> is a charting and graphing library</li> <li><a class="external" href="http://jeremyckahn.github.com/kapi/" title="http://jeremyckahn.github.com/kapi/">Kapi</a> is an animation keyframing API for Canvas</li> <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li> <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</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>, <a href="/en/WebGL" title="en/WebGL">WebGL</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