Xiper

Canvas text

Автор: Евгений Рыжков и Татьяна Головко Дата публикации:

Даже если твой браузер поддерживает canvas API, это еще не значит что он поддерживает canvas text API. API canvas создавались на протяжении некоторого времени и text API был добавлен в самом конце. Некоторые браузеры предоставили поддержку canvas API еще до того, как был внедрен text canvas.

Для определения поддержки text canvas API воспользуемся приемом 2, упомянутым ранее. Если твой браузер поддерживает canvas API, будет создан элемент canvas, который снабжен методом getContext(). Проверить поддержку текста для canvas можно с помощью этой функции:

function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}

Функция начинается с проверки поддержки canvas используя функцию supports_canvas, которая была рассмотрена выше.

Если твой браузер не поддерживает canvas API, ясное дело что не будет поддержки и text canvas!

Далее, создаем фиктивный элемент <canvas> и получаем его контекст. Это гарантировано сработает, т.к. функция supports_canvas() уже проверила его существование для всех объектов canvas:

var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');

И наконец, нужно проверить имеет ли контекст функцию fillText(). Если да, тогда text canvas доступен

return typeof context.fillText == 'function';
Вместо того чтобы писать эту функцию самостоятельно, можно использовать Modernizr: 
if (Modernizr.canvastext) {
// Давай напишем какой-нибудь текст!
} else {
// нет встроенной поддержки текста в canvas  :( :(
}

Куда дальше