Widely available すべての主要ブラウザで対応済み。安心して使用可能。
Canvas・グラフィクス Widely available

<canvas>

<canvas> 要素は、JavaScript のCanvas API や WebGL API を使用して動的にグラフィックスやアニメーションを描画するための領域を提供します。

Canvas・グラフィクス

概要

<canvas> 要素は、JavaScript のCanvas API や WebGL API を使用して動的にグラフィックスやアニメーションを描画するための領域を提供します。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 2+
Firefox 1.5+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

JAVASCRIPT 
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
  const ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.fillStyle = '#3498db';
  ctx.fillRect(10, 10, 100, 80);
  ctx.fillStyle = '#e74c3c';
  ctx.beginPath();
  ctx.arc(200, 75, 40, 0, Math.PI * 2);
  ctx.fill();
</script>

実務での使いどころ

  • <canvas> の活用

    JavaScript で動的にグラフィックスを描画するための要素。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク