Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
15 days ago

What steps can be taken to prevent strange artifacts from showing up when outlining letter shapes with sharp corners?

As an HTML5 canvas user, I am currently trying to render text using the Impact font. Despite it working correctly, the stroke is showing up all around the text area, leading to a bleeding effect. Is there any way to fix this problem? You can view the code and render via this link: http://jsfiddle.net/5uczpa1k/. Here's the code snippet: 




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);
Answers(1)
avatar
Tolerim
15 days ago
Verified Answer
Yes, the stroke bleeding out of the whole text area can be fixed by adding ctx.lineJoin = 'round'; to the code. This will make the edges of the stroke rounded instead of pointed. Here's an example of how you can update your code: 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "80px Impact";
ctx.strokeStyle = 'black';
ctx.lineWidth = 20;
ctx.lineJoin = 'round'; // add this line
ctx.fillStyle = 'white';
ctx.strokeText("A TEXT DEMO", 50, 150);
ctx.fillText("A TEXT DEMO", 50, 150);
This will produce a cleaner stroke around the text.
;