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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With