我目前正在使用HTML5的畫布使用Impact字體渲染一個字符串。這樣做很好，但是筆畫似乎從整個文本區域溢出。有什么辦法可以解決這個問題嗎？

代碼和渲染可以在這里看到: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>

嘗試添加一個miterLimit -它定義了用于繪制斜接的斜接(角)長度與描邊寬度之比的限制。超過限制時，連接將從斜接轉換為斜角:

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>

描邊總是一半畫在里面，一半畫在外面，除非您自己進行必要的計算來做一些不同的事情，并繪制兩個單獨的形狀，一個用于填充，一個用于輪廓。即使線寬是奇數，也應用默認的對半方法，在這種情況下，瀏覽器將嘗試在兩個實際像素之間的中間位置繪制，從而導致模糊和顏色強度損失(除非通過應用平移變換將畫布在兩個維度上移動0.5像素)。這是一個更大的問題，當半透明涉及。描邊后執行不透明填充。因此，最終結果是你的大綱實際上變成了& quot外面& quot但其表觀寬度是規范中規定寬度的一半。