1. ホーム
  2. javascript

[解決済み] HTML5 <canvas> がサポートされていないことを検出する最良の方法

2022-05-17 14:08:52

質問

ブラウザがHTML5をサポートしていない場合の標準的な対処法は? <canvas> タグのようなフォールバックコンテンツを埋め込むことです。

<canvas>Your browser doesn't support "canvas".</canvas>

しかし、ページの残りの部分は同じままなので、不適切または誤解を招く可能性があります。キャンバスの非サポートを検出し、それに応じてページの残りの部分を表示できるようにする方法が必要です。何かお勧めはありますか?

どのように解決するのですか?

Modernizr をはじめ、基本的に canvas を扱うすべてのライブラリで使用されている手法です。

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

ご質問の内容は ではなく がサポートされていない場合の検出ということでしたので、このような使い方をお勧めします。

if (!isCanvasSupported()){ ...