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