HTML5 Canvas Text Stroke for Large Font Size Not Drawn Properly
html, html5-canvas, javascript
Solution
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
Problem
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 :)