Thorn of text outline in canvas

Question

I'm using html5 canvas to draw some texts, but I got some ugly results, here is my sample code to draw the text:

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = 80;
  var y = 110;

  context.fillStyle = "white"
  context.font = '13px Arial';
  context.lineWidth = 3;
  // stroke color
  context.strokeStyle = 'black';
  context.strokeText('ABCDEFGHIJKLMNOPQRSTUVWXYZ!', x, y);
  context.fillText('ABCDEFGHIJKLMNOPQRSTUVWXYZ!', x, y);

And I got this result

enter image description here

then I change the text to "abs" and got this

enter image description here

You can see the "M" and "s" looks ugly, does anyone have an idea on how to solve this?

See this previous Stackoverflow answer: http://stackoverflow.com/questions/19988099/how-to-prevent-ugly-spikes-in-canvas-font-rendering/19988202#19988202 — markE, Nov 27 '13 at 17:46

score 4 · Accepted Answer · answered Nov 27 '13 at 19:58

4

It's not due to the typeface nor size, but due to how the lines in the stroke path are connected.

By changing the line-join method the spikes will go away:

context.lineJoin = 'round';

answered Nov 27 '13 at 19:58

Great. this helps a lot – Edgar Nov 28 '13 at 01:38

score 1 · Answer 2 · answered Mar 07 '14 at 21:07

1

Also, if you prefer sharp corners (without the miter-spikes,) try this:

context.lineJoin = 'miter';
context.miterLimit = 2;

http://jsfiddle.net/hwG42/3/

It does the trick.

answered Mar 07 '14 at 21:07

Jack

2,229
2
23
37

Philipp · Answer 3 · 2013-11-27T19:16:24.873

0

You might get better results when you use a different font.

Alternatively, you could use only fillText and create the outline with a shadow.

edited Nov 27 '13 at 19:16

answered Nov 27 '13 at 17:08

Philipp

67,764
9
118
153

Thorn of text outline in canvas

3 Answers3