Canvas

  • Revision slug: HTML/Canvas
  • Revision title: Canvas
  • Revision id: 436683
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

Added in HTML5, the HTML {{HTMLElement("canvas")}} element is an 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 or rendering.

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>.

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

Reference

  • CanvasDrawingStyles [2]
  • {{domxref("CanvasGradient")}}
  • {{domxref("CanvasImageSource")}}
  • CanvasPathMethods [1]
  • {{domxref("CanvasPattern")}}
  • {{domxref("CanvasProxy")}}
  • {{domxref("CanvasRenderingContext2D")}}
  • DrawingStyles [2]
  • {{domxref("HTMLCanvasElement")}}
  • {{domxref("ImageData")}}
  • Path [1]
  • {{domxref("RenderingContext")}}
  • {{domxref("TextMetrics")}}
  • {{domxref("WebGLRenderingContext")}}

The interfaces related to the WebGLRenderingContext are referenced under WebGL.

[1] CanvasPathMethods abstracts the path-related methods and properties used by both {{domxref("CanvasRenderingContext2D")}} and Path. For the moment, no browser implements Path (see {{bug("830734")}}) and the spec is still in flux.

[2] CanvasDrawingStyles abstracts the style-related methods and properties used by both {domxref("CanvasRenderingContext2D")}} and DrawingStyles.

Documentation

HTMLCanvasElement
The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of canvas elements. The HTMLCanvasElement interface also inherits the properties and methods of the HTMLElement interface.
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 DOM objects into a canvas
How to draw DOM content, such as HTML elements, into a canvas.
A basic raycaster
A demo of ray-tracing animation using canvas.

Resources

Generic

Libraries

  • Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas
  • 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
  • Rekapi 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.
  • Frame-Engine is a framework for developping applications and games

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-canvas-elementl', 'Canvas')}} {{Spec2('HTML5 W3C')}}  

 

Revision Source

<p>Added in <a href="/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/Web/JavaScript">JavaScript</a>). For example, it can be used to draw graphs, make photo compositions, create animations or even do real-time video processing or rendering.</p>
<p>Mozilla applications gained support for <code>&lt;canvas&gt;</code> starting with Gecko 1.8 (i.e. <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). The element was originally introduced by Apple for the OS X <a href="http://www.apple.com/findouthow/mac/#createwidget">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>&lt;canvas&gt;</code> by including a script from Google's <a 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> element is also used by <a href="/en-US/docs/Web/WebGL">WebGL</a> to do hardware-accelerated 3D graphics on web pages.</p>
<h2 id="Reference">Reference</h2>
<div class="index">
  <ul>
    <li><code>CanvasDrawingStyles</code> [2]</li>
    <li>{{domxref("CanvasGradient")}}</li>
    <li>{{domxref("CanvasImageSource")}}</li>
    <li><code>CanvasPathMethods</code> [1]</li>
    <li>{{domxref("CanvasPattern")}}</li>
    <li>{{domxref("CanvasProxy")}}</li>
    <li>{{domxref("CanvasRenderingContext2D")}}</li>
    <li><code>DrawingStyles</code> [2]</li>
    <li>{{domxref("HTMLCanvasElement")}}</li>
    <li>{{domxref("ImageData")}}</li>
    <li><code>Path</code> [1]</li>
    <li>{{domxref("RenderingContext")}}</li>
    <li>{{domxref("TextMetrics")}}</li>
    <li>{{domxref("WebGLRenderingContext")}}</li>
  </ul>
</div>
<p>The interfaces related to the WebGLRenderingContext are referenced under <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
<p>[1] <code>CanvasPathMethods</code> abstracts the path-related methods and properties used by both {{domxref("CanvasRenderingContext2D")}} and <code>Path</code>. For the moment, no browser implements <code>Path</code> (see {{bug("830734")}}) and the spec is still in flux.</p>
<p>[2] <code>CanvasDrawingStyles</code> abstracts the style-related methods and properties used by both {domxref("CanvasRenderingContext2D")}} and <code>DrawingStyles</code>.</p>
<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
<dl>
  <dt>
    <a href="/en-US/docs/Web/API/HTMLCanvasElement">HTMLCanvasElement</a></dt>
  <dd>
    The <strong><code><span>HTMLCanvasElement</span></code></strong> interface provides properties and methods for manipulating the layout and presentation of canvas elements. The <code>HTMLCanvasElement</code> interface also inherits the properties and methods of the <a href="/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> interface.</dd>
  <dt>
    <a href="/en-US/docs/Web/HTML/Canvas/Tutorial">Canvas tutorial</a></dt>
  <dd>
    A comprehensive tutorial covering both the basic usage of <code>&lt;canvas&gt;</code> and its advanced features.</dd>
  <dt>
    <a href="/en-US/docs/Code_snippets/Canvas">Code snippets:Canvas</a></dt>
  <dd>
    Some extension developer-oriented code snippets involving <code>&lt;canvas&gt;</code>.</dd>
  <dt>
    <a href="/en-US/docs/tag/Canvas_examples">Canvas examples</a></dt>
  <dd>
    A few <code>&lt;canvas&gt;</code> demos.</dd>
  <dt>
    <a href="/en-US/docs/Web/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/Web/Guide/HTML/A_basic_ray-caster">A basic raycaster</a></dt>
  <dd>
    A demo of ray-tracing animation using canvas.</dd>
</dl>
<h2 class="Resources" id="Resources" name="Resources">Resources</h2>
<h3 id="Generic">Generic</h3>
<ul>
  <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li>
  <li><a href="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">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li>
</ul>
<h3 class="Libraries" id="Libraries" name="Libraries">Libraries</h3>
<ul>
  <li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas</li>
  <li><a href="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework</li>
  <li><a href="http://processingjs.org">Processing.js</a> is a port of the Processing visualization language</li>
  <li><a href="http://easeljs.com/">EaselJS</a> is a library with a Flash-like API</li>
  <li><a href="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">Rekapi</a> is an animation keyframing API for Canvas</li>
  <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li>
  <li><a href="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">Frame-Engine</a> is a framework for developping applications and games</li>
</ul>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-canvas-elementl', 'Canvas')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision