HTML Living Standard/canvas

canvas 要素

<canvas> 要素は、解像度に依存しないビットマップを動的に生成および操作するための領域を提供します。この要素を使用すると、スクリプトを介してグラフィックスやアニメーションを描画することが可能です。

概要

<canvas> 要素はグラフィックスを描画するための低レベル API を提供します。この要素自体はグラフィックスコンテキストのための「キャンバス」を表し、2D グラフィックスや WebGL を使用した 3D グラフィックスのレンダリングに利用されます。

使用例

以下は、基本的な <canvas> 要素の使用例です。

<canvas id="example" width="300" height="150"></canvas>
<script>
  const canvas = document.getElementById('example');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(50, 50, 100, 100);
</script>

この例では、青い四角形がキャンバス上に描画されます。

属性

<canvas> 要素は以下の属性を持っています。

width

キャンバスの描画領域の幅をピクセル単位で指定します。デフォルト値は 300 です。

height

キャンバスの描画領域の高さをピクセル単位で指定します。デフォルト値は 150 です。

DOM インターフェース

<canvas> 要素は以下の DOM インターフェースを提供します。

メソッド

getContext(contextId, options?)
指定されたコンテキスト ID に基づいて描画コンテキストを取得します。
- contextId: "2d" または "webgl" など。
- options: オプションのパラメータオブジェクト。
toDataURL(type, quality)
キャンバスの内容を指定されたフォーマット（例: PNG）でデータ URL として返します。
toBlob(callback, type, quality)
キャンバスの内容を Blob オブジェクトとして非同期に取得します。

使用例

const canvas = document.querySelector('canvas');
const dataURL = canvas.toDataURL('image/png');
console.log(dataURL); // キャンバス内容のデータ URL

canvas.toBlob((blob) => {
  console.log(blob); // Blob オブジェクト
}, 'image/jpeg', 0.8);

2D コンテキスト

「2d」コンテキストでは、2D グラフィックスを描画するための多くのメソッドとプロパティが利用可能です。

例

線と円の描画

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 外側の円
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false);  // 口
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左目
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右目
ctx.stroke();

WebGL コンテキスト

「webgl」コンテキストでは、3D グラフィックスを描画するための OpenGL ES 2.0 ベースの API が提供されます。

例

WebGL の初期化

const gl = canvas.getContext('webgl');
if (!gl) {
  console.error('WebGL をサポートしていません');
}

アクセシビリティ

<canvas> 要素は視覚的な出力を提供しますが、通常の HTML テキストとは異なりスクリーンリーダーでは認識されません。そのため、<canvas> 要素内に代替コンテンツを提供することが推奨されます。

<canvas id="example" width="300" height="150">
  このブラウザではキャンバスはサポートされていません。
</canvas>

注意点

ピクセル単位の正確な制御が可能ですが、解像度に依存するため、高 DPI ディスプレイ向けに調整する必要があります。
描画コンテキスト（例: 2D または WebGL）を取得しない限り、<canvas> 要素自体は単なる空のボックスです。

互換性

<canvas> 要素は、モダンブラウザーで広くサポートされています。