canvas - グラフィックスを提供

canvas要素では、標準のHTMLやJavaScriptだけで、グラフやゲームグラフィックスなどを描画する際に使用します。
canvas要素を利用するためには、スクリプトが有効になっている必要があります、有効でない場合に備えてフォールバック・コンテンツを用意する必要があります。
canvas要素の子要素として、代替えテキストや画像などコンテンツを入れておくとよいでしょう。

描画される図形は特に指定しない限り黒が指定されます。

canvas要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
canvas - - -

canvas要素のHTML4からHTML5への変更点

canvas要素は、HTML5から新たに追加された要素です

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
width キャンバスの幅を指定(初期値:300)
height キャンバスの高さを指定(初期値:150)

「長方形を描画」のサンプル

HTMLコード

<canvas id="example">
図形を表示するには、canvas要素をサポートしたブラウザが必要です。
</canvas>
<script>
function draw() {
  // exampleのIDをもったオブジェクトを取得
  var canvas = document.getElementById("example");
	// canvasのコンテキスト取得
  if (canvas.getContext) {
    var context = canvas.getContext("2d");
    // 長方形を描画: left:20px,top:40px,width:50px,height:100px;
    context.fillRect(20,40,50,100);
  }
}
// 描画を実行
draw();
</script>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「長方形を描画」のサンプルプレビューを確認

「長方形を描画2」のサンプル

HTMLコード

<canvas id="example">
図形を表示するには、canvas要素をサポートしたブラウザが必要です。
</canvas>
<script>
function draw() {
  // exampleのIDをもったオブジェクトを取得
  var canvas = document.getElementById("example");
	// canvasのコンテキスト取得
  if (canvas.getContext) {
    var context = canvas.getContext("2d");

    // 長方形を描画: left:20px,top:40px,width:50px,height:100px;
    context.strokeStyle = "#ff0000"; // 枠線色の指定(赤)
    context.fillStyle = "#0000ff"; //塗色は(青)
    context.fillRect(20,40,50,100); // 長方形
    context.strokeRect(20,40,50,100); // 枠線
  }
}
// 描画を実行
draw();
</script>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「長方形を描画2」のサンプルプレビューを確認

「円を描画」のサンプル

HTMLコード

<canvas id="example">
図形を表示するには、canvas要素をサポートしたブラウザが必要です。
</canvas>
<script>
function draw() {
  // exampleのIDをもったオブジェクトを取得
  var canvas = document.getElementById("example");
	// canvasのコンテキスト取得
  if (canvas.getContext) {
    var context = canvas.getContext("2d");

    // 円を描画: left:100px,top:75px,R(半径):50,描画角度(開始),描画角度(終了),描画方向(trueで時計まわり)
    context.arc(100,75,50,0,-180,true);
    context.fillStyle = "green";
    context.fill();
  }
}
// 描画を実行
draw();
</script>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「円を描画」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100304/the-canvas-element.html#the-canvas-element)