When I draw text in canvas, I get ugly spikes, like this:

Try it here: /

While for example in photoshop, I get this:

The code is just a classic strokeText:

ctx.font = '20px Arial';
ctx.lineWidth = 15;
ctx.strokeStyle = '#fff';
ctx.strokeText('How to prevent ugly spikes?');

If it isn't possible to fix this, is there any workaround?

When I draw text in canvas, I get ugly spikes, like this:

Try it here: http://jsfiddle/48m4B/

While for example in photoshop, I get this:

The code is just a classic strokeText:

ctx.font = '20px Arial';
ctx.lineWidth = 15;
ctx.strokeStyle = '#fff';
ctx.strokeText('How to prevent ugly spikes?');

If it isn't possible to fix this, is there any workaround?

• javascript
• canvas
• stroke

• 1 +1 for the awesome spiky effect... – rodrigo-silveira Commented Nov 14, 2013 at 21:02

1 Answer 1

Try to set line join to:

ctx.lineJoin = 'round';

you can also adjust the miter limit:

ctx.miterLimit = 2;

Modified working fiddle