目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル

W3C : HTML5.3Interactive contentを禁止する旨の規定はなかった。

属性
  • グローバル属性
  • widthpx単位の幅を指定する非負整数。単位はつけない。デフォルトは、300
  • heightpx単位の高さを指定する非負整数。単位はつけない。デフォルトは、150
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • すべてのroleが指定可能。
視覚系ブラウザにおいて期待されるレンダリング
  • スクリプトによって描画されるビットマップを表示。
  • height属性値及びwidth属性値は、当該要素のサイズを制御する。
  • 描画されるべきものがない場合は、黒地の透明ビットマップを表示。
  • 当該要素サポートしてないブラウザスクリプトが無効なブラウザなどにおいては、当該要素内容代替コンテンツとして表示。
意味・用法

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

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

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

アクセシビリティ関連

私見・補足

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

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

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

表示確認

ソース1:円を描く

  <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要素の代替コンテンツその1。
  </canvas>
  
表示結果1
canvas要素の代替コンテンツその1。

未対応ブラウザにおいては、代替コンテンツが表示される。

IE6表示のスクリーンショット(表示結果1)
IE6表示:代替コンテンツが表示されている

IE7からIE8も同様。

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

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

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