Strange artifacts appear when drawing outlines of letter shapes with sharp corners. How to avoid them?

Question

I'm currently using HTML5's canvas to render a string using the Impact font. This works fine, but the stroke appears to be bleeding out of the whole text area. Is there any way to fix this?

Code and render can be seen here: http://jsfiddle.net/5uczpa1k/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "80px Impact";
ctx.strokeStyle = 'black';
ctx.lineWidth = 20;
ctx.fillStyle = 'white';
ctx.strokeText("A TEXT DEMO", 50, 150);
ctx.fillText("A TEXT DEMO", 50, 150);

<canvas id="myCanvas" width="500" height="500"></canvas>

Answer 1

Try adding a miterLimit - this defines a limit on the ratio of the miter (corner) length to the stroke-width used to draw a miter join. When the limit is exceeded, the join is converted from a miter to a bevel:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "80px Impact";
ctx.strokeStyle = 'black';
ctx.lineWidth = 20;
ctx.fillStyle = 'white';
ctx.miterLimit = 2;
ctx.strokeText("A TEXT DEMO", 50, 150);
ctx.fillText("A TEXT DEMO", 50, 150);

<canvas id="myCanvas" width="500" height="500"></canvas>