javascript - HTML5 Canvas Text Stroke for Large Font Size Not Drawn Properly - Stack Overflow

admin管理员组

文章数量:1318981

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

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

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

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

• javascript
• html
• html5-canvas

Share Improve this question Follow edited Dec 7, 2013 at 20:31 Kara 6,2261616 gold badges5353 silver badges5858 bronze badges asked Aug 25, 2013 at 15:17 Willy LazuardiWilly Lazuardi 1,81644 gold badges2626 silver badges4141 bronze badges 7

• 3 What browser are you using? I just checked your second fiddle using Chrome 28 and it displays properly. – Oscar Barrett Commented Aug 25, 2013 at 15:21
• I'm using Google Chrome Version 29.0.1547.57 m – Willy Lazuardi Commented Aug 25, 2013 at 15:23
• I'm running 29.0.1547.57 on OSX and it is broken there. – dc5 Commented Aug 25, 2013 at 15:31
• 2 Looks like it is a Chrome issue with the latest version, you may want to submit a bug report. Here is a parison on BrowserStack: i.imgur./4um9JST.png – Oscar Barrett Commented Aug 25, 2013 at 15:35
• Okay, thanks @Oscar for your parison :). I just checked with my FF 22 version, and it's fine. It's absolutely a browser patibility issue – Willy Lazuardi Commented Aug 25, 2013 at 15:41

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

It's a known issue with Chrome where font sizes are above 256 pixels (incl. scaling):
https://code.google./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/show_bug.cgi?id=909873

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

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

本文标签： javascriptHTML5 Canvas Text Stroke for Large Font Size Not Drawn ProperlyStack Overflow