[Javascript] El trazo de texto de lienzo HTML5 para tamaño de fuente grande no se dibuja correctamente


Answers

Esto está funcionando

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);

Demo de trabajo ---> jsFiddle

Question

Quiero escribir un texto grande en un lienzo HTML5 con un borde rojo ( color de trazo ) y un color de relleno verde .

Le doy el ancho de trazo a 5px .

Estuvo bien cuando establecí el font size la font size a menos de 260px .

Aquí está mi primer código 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);

Pero cuando configuro el font size mayor o igual a 260 px , el borde / trazo de texto no está coloreado correctamente. Simplemente tenía un borde rojo no lleno de color rojo.

Aquí está mi segundo código 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);

Mi pregunta es cómo conseguir que el texto correcto se llene con un tamaño de fuente grande (como la primera imagen en lugar de la segunda). Gracias por adelantado :)