Javascript 画布用边框画线

我需要画一条线，给它一个边界

我试着画两条线，一条是5px，另一条是3px以上

但这看起来并不是真正的边界

const ctx=canvas.getContext（'2d'）；
常量路径=新路径2D（）；
ctx.strokeStyle=“黑色”；
ctx.lineWidth=5；
路径。移动到（40，40）；
线路图（50,35）；
线路图（60,40）；
冲程（路径）；
ctx.strokeStyle=“红色”；
ctx.lineWidth=3；
路径。移动到（40，40）；
线路图（50,35）；
线路图（60,40）；
冲程（路径）
您可以尝试使用shadow：


const ctx=canvas.getContext（'2d'）；
函数drawPath（路径）{
ctx.lineWidth=3；
ctx.strokeStyle=“红色”；
ctx.shadowColor='黑色'；
对于（i=0；i尝试在外线设置“endCap”：

const ctx = canvas.getContext('2d');
const path = new Path2D();

ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.lineCap = "butt"; // butt  round  square <-- other options

path.moveTo(40, 40);
path.lineTo(50, 35);
path.lineTo(60, 40);

ctx.stroke(path);

ctx.strokeStyle = "red";
ctx.lineWidth = 3;

path.moveTo(40, 40);
path.lineTo(50, 35);
path.lineTo(60, 40);

ctx.stroke(path);

const ctx=canvas.getContext（'2d'）；
常量路径=新路径2D（）；
ctx.strokeStyle=“黑色”；
ctx.lineWidth=5；
ctx.lineCap=“butt”//butt round square这能回答你的问题吗？@Taxel没有。我以前看到过这个答案。也许答案中的方法就是这样做的。但是我没有成功地为宽行添加
ctx.lineCap=“square”
，为另一行添加
ctx.lineCap=“butt”