javascript - キャンバス フォントのレンダリングで醜いスパイクを防ぐ方法は?

Question

キャンバスにテキストを描画すると、次のような醜いスパイクが発生します。

ここで試してみてください: http://jsfiddle.net/48m4B/

たとえば、Photoshop では、次のようになります。

コードは単なる従来の strokeText です。

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

これを修正できない場合、回避策はありますか?

Answer 1

行の結合を次のように設定してみてください:

ctx.lineJoin = 'round';

マイター制限を調整することもできます。

ctx.miterLimit = 2;

修正された作業フィドル