Лучший способ определить, что HTML5 не поддерживается

Если Вы собираетесь получить контекст своего холста, Вы могли бы также использовать его в качестве теста:

var canvas = document.getElementById('canvas');
var context = (canvas.getContext?canvas.getContext('2d'):undefined);
if(!!context){
  /*some code goes here, and you can use 'context', it is already defined*/
}else{
  /*oof, no canvas support :(*/
}

Существует два популярных метода обнаружения поддержки холста в браузерах:

1. Предложение Мэтта проверки существования getContext , также аналогичным образом используется библиотекой Modernizr:

    var canvasSupported = !! document.createElement ("canvas"). getContext; 
    

2. Проверка существования интерфейса HTMLCanvasElement , как определено в WebIDL и спецификации HTML . Этот подход был также рекомендован в сообщении в блоге команды IE 9 .

    var canvasSupported = !! window.HTMLCanvasElement; 
    

Я рекомендую вариант последнего (см. Дополнительные примечания ) по нескольким причинам:

• Все известные браузеры поддержка Canvas - включая IE 9 - реализует этот интерфейс;
• Он более краток и сразу становится очевидным, что делает код;
• Подход getContext значительно медленнее во всех браузерах , потому что это предполагает создание HTML-элемента. Это не идеально, когда вам нужно максимально увеличить производительность (например, в такой библиотеке, как Modernizr).

Использование первого метода не дает заметных преимуществ. Оба подхода можно подделать, но это вряд ли произойдет случайно.

Дополнительные примечания

По-прежнему может потребоваться проверка возможности получения двухмерного контекста. Как сообщается, некоторые мобильные браузеры могут возвращать true для обеих вышеуказанных проверок, но возвращать null для .getContext ('2d') . Вот почему Modernizr также проверяет результат .getContext ('2d') . Однако WebIDL и HTML - опять же - дают нам еще один лучший, более быстрый вариант:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Обратите внимание, что мы можем полностью пропустить проверку элемента холста и сразу перейти к проверке поддержки 2D-рендеринга. Интерфейс CanvasRenderingContext2D также является частью спецификации HTML.

Вы должны использовать подход getContext для обнаружения поддержки WebGL , потому что, хотя браузер может поддерживать WebGLRenderingContext , ] getContext () может вернуть null , если браузер не может взаимодействовать с графическим процессором из-за проблем с драйверами, а программная реализация отсутствует. В этом случае проверка интерфейса сначала позволяет пропустить проверку для getContext :

var cvsEl, ctx;
if (!window.WebGLRenderingContext)
    window.location = "http://get.webgl.org";
else {
    cvsEl = document.createElement("canvas");
    ctx = cvsEl.getContext("webgl") || cvsEl.getContext("experimental-webgl");

    if (!ctx) {
        // Browser supports WebGL, but cannot create the context
    }
}

Сравнение производительности

Производительность подхода getContext в Firefox на 85-90% ниже. 11 и Opera 11 и примерно на 55% медленнее в Chromium 18.

Здесь может быть ошибка - некоторые клиенты не поддерживают все методы холста.

var hascanvas= (function(){
    var dc= document.createElement('canvas');
    if(!dc.getContext) return 0;
    var c= dc.getContext('2d');
    return typeof c.fillText== 'function'? 2: 1;
})();

alert(hascanvas)

Обычно я проверяю getContext при создании объекта canvas.

(function () {
    var canvas = document.createElement('canvas'), context;
    if (!canvas.getContext) {
        // not supported
        return;
    }

    canvas.width = 800;
    canvas.height = 600;
    context = canvas.getContext('2d');
    document.body.appendChild(canvas);
}());

Если он поддерживается, то можно продолжить настройку холста и добавить его в DOM. Это простой пример Progressive Enhancement, который я (лично) предпочитаю Graceful Degradation.

Почему бы не попробовать modernizr ? Это библиотека JS, обеспечивающая возможность обнаружения.

Цитата:

Вы когда-нибудь хотели сделать if-выражения в своем CSS для доступности таких интересных функций, как border-radius? Что ж, с Modernizr вы можете этого добиться!