1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
---
title: Canvas
slug: HTML/Canvas
tags:
- HTML
- 'HTML:Canvas'
- 'HTML:Element'
- NeedsTranslation
- References
- TopicStub
translation_of: Web/API/Canvas_API
---
<p>Added in <a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a>, the <strong>HTML {{HTMLElement("canvas")}} element</strong> is an element which can be used to draw graphics via scripting (usually <a href="/en-US/docs/JavaScript" title="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><canvas></code> starting with Gecko 1.8 (i.e. <a href="/en-US/docs/Firefox_1.5_for_developers" title="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><canvas></code> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <code><canvas></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><canvas></code>.</p>
<p>The <code><canvas></code> element is also used by <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> to do hardware-accelerated 3D graphics on web pages.</p>
<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
<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>
The <code><canvas></code> element is part of the WhatWG Web applications 1.0 specification, also known as HTML5.</dd>
<dt>
<a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></dt>
<dd>
A comprehensive tutorial covering both the basic usage of <code><canvas></code> and its advanced features.</dd>
<dt>
<a href="/en-US/docs/Code_snippets/Canvas" title="Code_snippets/Canvas">Code snippets:Canvas</a></dt>
<dd>
Some extension developer-oriented code snippets involving <code><canvas></code>.</dd>
<dt>
<a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></dt>
<dd>
A few <code><canvas></code> demos.</dd>
<dt>
<a href="/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="HTML/Canvas/Drawing DOM objects into a canvas">Drawing DOM objects into a canvas</a></dt>
<dd>
How to draw DOM content, such as HTML elements, into a canvas.</dd>
<dt>
<a href="/en-US/docs/A_Basic_RayCaster" title="A Basic RayCaster">A basic raycaster</a></dt>
<dd>
A demo of ray-tracing animation using canvas.</dd>
<dt>
<a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="Gecko_DOM_Reference#Canvas_interfaces">Canvas DOM interfaces</a></dt>
<dd>
Canvas DOM interfaces on Gecko.</dd>
</dl>
<p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Canvas" title="tag/HTML:Canvas">View All...</a></span></p>
</div>
<div class="section">
<h2 class="Community" id="Community">Community</h2>
<ul>
<li>View Mozilla forums... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li>
<li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Canvas-Developers Yahoo Group</a></li>
</ul>
<h2 class="Resources" id="Resources" name="Resources">Resources</h2>
<ul>
<li><a class="external" href="http://joshondesign.com/p/books/canvasdeepdive/title.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">HTML5 Canvas Deep Dive</a></li>
<li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li>
</ul>
<h2 class="Libraries" id="Libraries" name="Libraries">Libraries</h2>
<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="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</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>
<li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> is a framework for developping applications and games</li>
</ul>
<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
<ul>
<li><a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></li>
</ul>
</div>
</div>
<div>
{{HTML5ArticleTOC()}}</div>
|
