How to prevent ugly spikes in canvas font renderin

问题:

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

Try it here: http://jsfiddle.net/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?

回答1:

Try to set line join to:

ctx.lineJoin = 'round';

you can also adjust the miter limit:

ctx.miterLimit = 2;

Modified working fiddle