files/uk/web/api/canvas_api/tutorial/index.html


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

---
title: Canvas tutorial
slug: Web/API/Canvas_API/Tutorial
tags:
  - Canvas
  - Graphics
  - Guide
  - HTML
  - HTML5
  - Intermediate
  - NeedsTranslation
  - TopicStub
  - Web
translation_of: Web/API/Canvas_API/Tutorial
---
<div>{{CanvasSidebar}}</div>

<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p>

<div class="summary">
<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> is an <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> element which can be used to draw graphics using scripting (usually <a href="/en-US/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>). This can, for instance, be used to draw graphs, make photo composition or simple (and <a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">not so simple</a>) animations. The images on this page show examples of <a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> implementations which will be created in this tutorial.</p>
</div>

<p><span class="seoSummary">This tutorial describes how to use the <code>&lt;canvas&gt;</code> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.</span></p>

<p>First introduced in WebKit by Apple for the OS X Dashboard, <code>&lt;canvas&gt;</code> has since been implemented in browsers. Today, all major browsers support it.</p>

<h2 id="Before_you_start" name="Before_you_start">Before you start</h2>

<p>Using the <code>&lt;canvas&gt;</code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code>&lt;canvas&gt;</code> element is not supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML <code>height</code> and <code>width</code> property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p>

<h2 id="In_this_tutorial" name="In_this_tutorial">In this tutorial</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Basic usage</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Drawing shapes</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Applying styles and colors</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Using images</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformations</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing and clipping</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Basic animations</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions and accessibility</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimizing the canvas</a></li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Finale</a></li>
</ul>

<h2 id="See_also" name="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas topic page</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>
 <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li>
</ul>

<h2 id="A_note_to_contributors">A note to contributors</h2>

<p>Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.</p>

<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div>