<canvas>要素

Technical Summary

Definition / Categories

Bitmap dimensionsとCSS表示寸法

widthとheightは有効な非負整数で、要素のbitmap寸法を指定します。CSSのwidthとheightはレイアウト上の表示寸法を制御します。この2組の値は同じ役割ではありません。

<canvas id="plot" width="320" height="180">
  グラフの要約: 1月12、2月18、3月14。
</canvas>

<style>
  #plot { width: 640px; height: 360px; }
</style>

この例では320×180のbitmapを、CSS上では640×360で表示します。画像の表示サイズをCSSだけで変えても、bitmapの座標系や保存画素数が同じ割合で増えるわけではありません。

2D contextが結び付いたcanvasのwidthまたはheightを設定すると、bitmap寸法の設定手順が実行され、描画状態が初期化されてbitmapがリサイズされます。同じ値を再設定した場合もクリアと状態初期化が起きます。これはCSS寸法の変更とは異なります。WebGL / WebGPUでは各API仕様が寸法変更時の振る舞いを定める範囲があります。

Context modeとgetContext()

canvasは、最初は描画contextを持ちません。getContext()でcontextを取得すると、そのcanvasのcontext modeが定まります。HTML Standardが挙げるmodeには2d、bitmaprenderer、webgl、webgl2、webgpuがあります。

const canvas = document.querySelector("#plot");
const context = canvas.getContext("2d");

if (context) {
  context.fillStyle = "#4c78c2";
  context.fillRect(16, 16, 120, 64);
}

既に別種類のcontextを作成したcanvasから、違う種類のcontextを取得しようとするとnullになることがあります。指定したcontextに対応していない場合もnullです。2D contextの描画状態とメソッドはCanvas 2D APIの仕様に属し、このTopicではcanvas要素との境界を扱います。

Fallback contentとAccessibility

非視覚メディア、またはcanvasのスクリプト処理・要素サポートが使えない条件では、子孫がfallback contentとして表されます。canvasがbitmapとして表示されているとき、子孫のfallback contentは通常の可視テキストとして重ねて表示されるわけではありません。

canvas内のfallbackにあるフォーカス可能な子孫は、canvasが画像として表示されている場合でもフォーカス対象になり得ます。対話的なcanvasでは、視覚上の各操作領域に対応するフォーカス可能なfallback領域を用意する関係がHTML Standardに記述されています。図やデータが伝える内容は、必要に応じてcanvasの外にも通常のHTMLで提供します。

HTML-AAMはcanvasに対するplatform mappingを定め、子孫を別にmappingする旨を示しています。仕様上のmappingと個々のブラウザーがAccessibility Treeに公開する内容は別Evidenceです。今回、ブラウザーや支援技術での実測は行っていません。

画像読み込みとorigin-clean

canvasに画像やvideoなどを描画すると、入力画像のorigin-clean状態が描画先bitmapへ伝わる場合があります。CORS許可を得ていないcross-origin画像のピクセルを読み出せると、別originの情報が漏れるためです。

origin-cleanでないbitmapに対しては、getImageData()、toDataURL()、toBlob()などのpixel readback / export手順がSecurityErrorを投げる場合があります。取得元のCORS応答、読み込み条件、bitmapの履歴を確認せずに、描画した画像は常に読み出せる、または常に読み出せないと一般化しません。

このセキュリティ境界はHTML Standardのcanvas processing modelに記述されます。画像の取得とCORSの詳細、Canvas 2Dの各描画operationの完全な動作は、それぞれの関連仕様と実装Evidenceで別途確認します。

Fact / Evidence（主張 / 根拠）

Evidence

1. HTML Living Standard: The canvas element — categories, content model, fallback, bitmap dimensions, context mode, context acquisition, and origin-clean behavior
2. HTML Accessibility API Mappings: canvas — computed role, platform mappings, and descendant boundary
3. Web Platform Tests: canvas element tests — 選定したreset test 3件の結果は下記registryに記録。リンク先はcanvas element test全体の一覧
4. HTML Standard: embedded content rendering — rendering model references for embedded content

Implementation Evidence

SPEC claims are separated from browser, WPT, and accessibility observations. Partial rows record only the environment and test cases listed in their conditions; they do not establish cross-browser behavior or complete conformance.

Coverage / Open Issues

• 仕様確認済みcategories、content model、bitmap寸法の既定値、context modeの入口
• 仕様確認済みfallback descendants、2D bitmap resize / context reset、origin-cleanの主要境界
• 一部実測済みChrome 154の1環境で基本動作を観測。Firefox / Safari等との比較、独立したWebGL support確認は未測定
• 一部実施済みreset関連WPT 3件は3/3 pass。canvasの全suite、他browser、その他の機能領域は未実施
• 一部観測済みChrome AX Treeでcanvas名とfallback linkを観測。platform API、実際のfocus移動、支援技術は未観測
• 対象外 / 別範囲Canvas 2Dの全operation、WebGL / WebGPU APIの完全な適合性と性能

現時点のCoverageは上記の選定範囲に限られます。仕様確認や一部実測は、全ブラウザーでの同一動作、WPT全件pass、またはplatform・支援技術でのアクセシビリティ確認を意味しません。

Related surface

初心者向けのcontext作成と寸法例はYugienのcanvas要素ページを参照してください。既存の画像をcanvasへ描画する入力境界はimg、画像候補の選択はpicture、画像・media候補を親要素に提供する条件はsourceで扱います。これらは関連しますが、canvasのbitmap / context処理とは別の仕様領域です。