HTML5 canvas lineWidth is being ignored

Question

我正在画布上编写文本，并试图在其周围添加某种边框，该边框应根据文本大小动态调整大小。

我的代码是：

<script>
var mainText='this is a test';
var mainTextSize=40;
var mainTextDimensions=getTextDimensions(mainText,mainTextSize,'verdana');
var smallStampCanvas=document.createElement("canvas");
smallStampCanvas.width=mainTextDimensions.width;
smallStampCanvas.height=totalHeight;
var smallStampContext=smallStampCanvas.getContext('2d');
smallStampContext.textBaseline='top';
smallStampContext.fillStyle = '#FF0000'; 
smallStampContext.strokeStyle = smallStampContext.fillStyle;
smallStampContext.font = "bold "+mainTextSize+"px verdana";
smallStampContext.fillText(
    mainText,
    0,
    0
);
smallStampContext.strokeRect(0,0,smallStampCanvas.width,smallStampCanvas.height);
smallStampContext.strokeRect(0,0,smallStampCanvas.width,mainTextDimensions.height);
smallStampContext.lineWidth=Math.ceil(mainTextSize/4);
smallStampContext.moveTo(0,mainTextDimensions.height); smallStampContext.lineTo(smallStampCanvas.width,mainTextDimensions.height);
</script>

除了线宽外，一切正常。无论输入什么值，它似乎都没有任何影响。（行始终为 1px）记录它时，输入整数 10。

有人知道可能是什么问题吗？

Answer 1

试试这个：

smallStampContext.beginPath();
smallStampContext.lineWidth=Math.ceil(mainTextSize/4);
smallStampContext.moveTo(0,mainTextDimensions.height); 
smallStampContext.lineTo(smallStampCanvas.width,mainTextDimensions.height);
smallStampContext.stroke();

moveTo和lineTo不画"线"。只有stroke才能实际创建线条。