В настоящее время я использую HTML5 canvas для рендеринга нескольких строк с использованием метода fillText. Это прекрасно работает, но я также хотел бы дать каждой строке черный штрих 1px. К сожалению, функция strokeText, похоже, использует внутренний ход. Чтобы противостоять этому, я написал функцию drawStrokedText, которая достигает эффекта, которым я подвергаюсь. К сожалению, это ужасно медленно (по понятным причинам).
Существует ли быстрый, кросс-браузерный способ достижения 1px внешнего штриха с использованием встроенных функций холста?
drawStrokedText = function(context, text, x, y)
{
context.fillStyle = "rgb(0,0,0)";
context.fillText(text, x-1, y-1);
context.fillText(text, x+1, y-1);
context.fillText(text, x-1, y);
context.fillText(text, x+1, y);
context.fillText(text, x-1, y+1);
context.fillText(text, x+1, y+1);
context.fillStyle = "rgb(255,255,255)";
context.fillText(text, x, y);
};
Вот пример эффекта на работе: