canvas要素：HTML Living Standard各要素別メモ

概要

カテゴリー

配置できる場所

上記カテゴリーの要素が置ける場所。

内容モデル

Transparent。ただし、Interactive content（ただし、以下を除く）を子孫に含んではならない。未対応ブラウザ向けに、代替コンテンツか代替テキストか最低でも説明テキスト等を入れる。
- a要素
- usemap属性が指定されているimg要素
- button要素
- type属性値がcheckboox又はradioのinput要素
- ボタンとなるinput要素
- multiple属性が指定されているか又はsize属性値が1より大きいselect要素

main要素の規定による制限
- main要素を子孫に含んではならない。

属性

グローバル属性
width→px単位の幅を指定する非負整数。単位はつけない。デフォルトは、300
height→px単位の高さを指定する非負整数。単位はつけない。デフォルトは、150

HTML構文におけるタグの省略

省略不可。

WAI-ARIA

すべてのroleが指定可能。

視覚系ブラウザにおいて期待されるレンダリング

スクリプトによって描画されるビットマップを表示。この場合は、置換要素となる。
height属性値及びwidth属性値は、当該要素のサイズを制御する。
描画されるべきものがない場合は、黒地の透明ビットマップを表示。この場合は、置換要素となる。
当該要素をサポートしてないブラウザ、スクリプトが無効なブラウザなどにおいては、当該要素の内容を代替コンテンツとして表示。

意味・用法

スクリプトにより動的に変化する視覚的画像をレンダリングできる解像度依存のビットマップ描画領域を提供する。

より適切な要素が利用可能である場合は、この要素を使うべきでない。

それが表示されてなくても、当該要素の内容にはキーボード等でアクセス・操作できる。

アクセシビリティ関連

代替テキスト相当：当該要素の内容から取得できるテキスト。
未対応ユーザーエージェント向け代替コンテンツ：当該要素の内容。
アクセシビリティ支援技術向け：当該要素の内容。
描画スクリプトがアクセス不能又は正常に処理できなかった場合：何も描画されない領域が表示されるだけで、代替コンテンツはない。
代替テキストや代替コンテンツが提示されない状況もありうることから、前後にテキストの形でキャプションや説明文を配置すべきである（Techniques for WCAG 2.1 : G82, G92, G94, G95, G100）。

私見・補足

スクリプトで制御される画像を描画する領域を示す。インタラクティブ的・動的表現が主。

スクリプトが利用不可だと描画されないので、インタラクティブ的・動的表現が不要なものにむやみに使用すべからず。

単純な静止画なら、img要素、svg要素で充分。

表示確認

ソース１：円を描く


  <script>
    onload=function(){canvas();}
    function canvas() {
      var circle = document.getElementById('canex');
      var ctx = circle.getContext('2d');
      ctx.beginPath();
      ctx.fillStyle = '#ff9933';
      ctx.arc(100,60,50,0,Math.PI*2,true);
      ctx.fill();
      ctx.stroke();
    }
  </script>
  <canvas id="canex" width="200" height="200" style="border:1px solid #000000">
    canvas要素の代替コンテンツその１。
  </canvas>

表示結果１

ソース２：描画のためのスクリプトがない場合


  <canvas width="200" height="200" style="border:1px solid #000000">
    canvas要素の代替コンテンツその２。
  </canvas>

表示結果２

対応してるブラウザにおいては、この場合も代替コンテンツは表示されず、描画がない領域が表示されるだけ。