Как предотвратить уродливые всплески в рендеринг шрифта холста?

Question

Когда я рисую текст холст, я получаю уродливые шипы, как это:

Попробуйте здесь: http://jsfiddle.net/48m4B/

В то время как, например, в фотошопе, я получаю это:

Код просто классический 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; 

Modified working fiddle