HTML5 Canvas Text Stroke для большого размера шрифта Неправильно

Я хочу написать большой текст на холсте HTML5 с цветом красного цвета (цвет штриха) и зеленый цвет заливки.. p >

Я даю ширину хода до 5px.

Это было прекрасно, когда я установил font size в меньше 260 пикселей.

Вот мой первый код http://jsfiddle.net/8Zd7G/:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="240px Calibri";
ctx.strokeStyle = "F00"; //Red
ctx.fillStyle = "0F0"; //Green
ctx.lineWidth = 5;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

Но когда я устанавливаю font size в больше или равен 260 px, граница текста/ход не окрашиваются должным образом. У нее просто была красная рамка, не заполненная красным цветом.

Вот мой второй код http://jsfiddle.net/Pdr7q/:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="260px Calibri";
ctx.strokeStyle = "F00";
ctx.fillStyle = "0F0";
ctx.lineWidth = 5;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

Мой вопрос заключается в том, как получить правильное заполнение текста с большим размером шрифта (например, первое изображение, а не второе)? Спасибо заранее:)

Ответ 1

Это известная проблема с Chrome, где размер шрифта превышает 256 пикселей (включая масштабирование):
https://code.google.com/p/chromium/issues/detail?id=280221

В настоящий момент не существует решения проблемы, но следуйте за потоком (ссылка выше), чтобы увидеть статус в более позднее время (последнее обновление 25 октября).

Вы можете уменьшить проблему, уменьшив ширину линии, хотя проблема все равно будет.

Другой вариант состоит в том, чтобы нарисовать половину размера (так что размер < 256) во временном холсте, а затем нарисуем этот холст в основной размер до требуемого размера. Это сделает текст более размытым, но он будет выглядеть лучше, чем кудрявая версия, которую я считаю.

У Firefox есть связанная ошибка (несоосность при больших размерах):
https://bugzilla.mozilla.org/show_bug.cgi?id=909873

Ответ 2

Работает

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = '120pt Calibri';
ctx.strokeStyle = "#F00";
ctx.fillStyle = "#0F0";
ctx.lineWidth = 3;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

Рабочий демонстрационный пример --- > jsFiddle

Ответ 3

Я думаю, что проблема может быть связана с семейством шрифтов, которые вы используете: "Calibri"

Я нахожусь в Chrome с ubuntu (Chrome 27), и у меня нет calibri, но я тестировал его с Arial, и это работает хорошо (обратите внимание на размер шрифта на 360 пикселей, даже больше, чем ваш):

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = '360px Arial';
ctx.strokeStyle = "#F00";
ctx.fillStyle = "#0F0";
ctx.lineWidth = 5;
ctx.fillText("Big smile!",0,200);
ctx.strokeText("Big smile!",0,200);

Демо:

JSFiddle