HTML5 Canvas Text Stroke for Large Font Size Not Drawn Properly

Question

I want to write a large text on HTML5 canvas with a red border color ( stroke color ) and green fill color .

I give the stroke width to 5px .

It was fine when I set the font size to less than 260px .

Here is my first code 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);

But when I set the font size to larger or equal than 260 px , the text border/stroke is not properly colored. It just had a red border not filled by red color.

Here is my second code 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);

My question is how to get the proper text stoke fill with a large font size (like the first picture rather than the second one)? Thanks in advance :)

Answer 1

This is working

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

Working Demo ---> jsFiddle

Answer 2

It's a known issue with Chrome where font sizes are above 256 pixels (incl. scaling):
https://code.google.com/p/chromium/issues/detail?id=280221

At the moment there does not seem to be a solution for the issue but follow the thread (link above) to see status at a later time (last update 25. Oct).

You can reduce the problem by reducing line-width although the problem will still be there.

Another option is to draw half the size (so that size < 256) into a temporary canvas, then draw this canvas into the main scaled to the size you need. It will make the text more blurry but it will look better than the curly version I believe.

Firefox has a related bug (misalignment at big sizes):
https://bugzilla.mozilla.org/show_bug.cgi?id=909873

Answer 3

I think the problem might be related with the font-family you're using: "Calibri"

I'm on Chrome with ubuntu (Chrome 27) and i dont have calibri here, but i've tested with Arial and this is working good (notice the font size to 360px, even bigger than yours):

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

Demo:

JSFiddle