<canvas> はスクリプト(一般的に JavaScript) を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な（またはあまり簡単ではない）アニメーションに使うことができます。右の画像は後でこのチュートリアルの中でみる <canvas> を実際に使った例です。
<canvas> は Apple によって Mac OS X の Dashboard のために初めて導入され、後に Safari に実装されました。Firefox 1.5 のような Gecko 1.8 ベースのブラウザもこの新しい要素をサポートしてます。<canvas> 要素は HTML 5 としても知られる WhatWG Web applications 1.0 仕様の一部分です。
このチュートリアルでは、あなたの HTML ページに <canvas> 要素を導入する方法を説明します。提供された例は、<canvas> で出来ることの、いくつかの明確なアイデアを与え、それをあなた自身で実装できるようにするために使うことができます。
始める前に
<canvas> を使うことはとても難しいわけではありませんが、HTML と JavaScript の基本的な理解が必要です。
上述のように、<canvas> 要素は全てのモダンブラウザでサポートされているわけではないため、例を見るには Firefox 1.5 か他の最近の Gecko ベースブラウザ、Opera 9、もしくは最近のバージョンの Safari が必要になるでしょう。
このチュートリアルの一覧
関連情報
canvas に関する外部情報（日本語）
canvas に関する外部情報（英語）
- HTML5 Tutorial
- Adding Text to Canvas
- Canvas Demos - Games, applications, tools and tutorials
- Canvas Drawing Tool
- Canvas Animation Application
- interactive canvas tutorial
- Canvas Cheat Sheet with all attributes and methods
- Adobe Illustrator to Canvas plug-in
- HTML5CanvasTutorials
- How to draw a point with the Canvas API
- How to draw N grade Bézier curves with the Canvas API
- 31 days of canvas tutorials