HTML の<canvas> 要素 とキャンバススクリプティング API やWebGL API を使用して、グラフィックやアニメーションを描画することができます。

属性

他のすべての HTML 要素と同様に、グローバル属性を持ちます。

height

CSS ピクセルで示した座標空間の高さ。既定では 150 ピクセルに設定されています。

moz-opaque非標準非推奨;

canvas に半透明性がファクターになるかを知らせます。キャンバスは半透明性がないことがわかっていれば、描画パフォーマンスを最適化できます。これは Mozilla ベースのブラウザーしか対応していません。代わりに標準化されたcanvas.getContext('2d', { alpha: false }) を使用してください。

width

CSS ピクセルで示した座標空間の幅。既定では 300 ピクセルに設定されています。

使用上の注意

代替コンテンツ

<canvas> のブロックの中で、代替コンテンツを提供すべきです。その内容物は、 canvas に対応しない古いブラウザーおよび JavaScript が無効であるブラウザーで描画されます。

</canvas> タグが必要

<img> 要素とは異なり、<canvas> 要素は終了タグ (</canvas>) が必要です。

CSS と HTML におけるキャンバスの寸法指定の違い

表示されるキャンバスの寸法は、スタイルシートを用いて変更できますが、そうすると画像はスタイルで設定した寸法に合うように拡大縮小され、最終的なグラフィックが歪んで表示されることがあります。

キャンバスの寸法は、HTML または JavaScript を用いてwidth およびheight 属性を<canvas> 要素に直接設定するした方がいいでしょう。

キャンバスの最大寸法

<canvas> 要素の最大寸法はとても広いのですが、正確な寸法はブラウザーに依存します。以下のものは様々なテストやその他の情報源（Stack Overflow など）から収集したいくらかのデータです。

例

HTML

このコードスニペットは、 HTML 文書に canvas 要素を追加します。ブラウザーがキャンバスをレンダリングできない場合や、キャンバスを読み込めない場合には、代替テキストが提供されます。

<canvas width="300" height="300">  キャンバスの表示内容を説明する代替テキストです。</canvas>

JavaScript

それから JavaScript コード内でHTMLCanvasElement.getContext() を呼び出して描画コンテキストを取得し、キャンバス上に描画を開始します。

const canvas = document.querySelector("canvas");const ctx = canvas.getContext("2d");ctx.fillStyle = "green";ctx.fillRect(10, 10, 100, 100);

結果

アクセシビリティの考慮

代替コンテンツ

<canvas> 要素は単なるビットマップであり、描かれたオブジェクトに関する情報は提供しません。キャンバスのコンテンツには、セマンティック HTML のようなアクセシビリティツールには公開されていません。一般的に、アクセシビリティに配慮したウェブサイトやアプリではキャンバスを使用しないでください。アクセシビリティを改善するには、以下のガイドが役立ちます。

• Canvas accessibility use cases
• Canvas element accessibility issues
• HTML Canvas Accessibility in Firefox 13 – by Steve Faulkner
• Best practices for interactive canvas elements

仕様書

ブラウザーの互換性

関連情報

• MDN のキャンバスポータル
• キャンバスチュートリアル
• キャンバス関連のデモ
• キャンバス早見表 (2009)
• キャンバス早見表 (pdf) (2015)
• キャンバス早見表 (pdf)
• Apple によるキャンバスの紹介 (2013)