Javascript 画布上的圆角梯形形状

我正在尝试用画布画一个形状，我离我想要的非常近。只是圆角有点难实现我需要的

我有以下代码

var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");

// Set rectangle and corner values
var cornerRadius = 5;

// Set faux rounded corners
context.lineJoin = "round";
context.lineWidth = 50;

context.beginPath();
context.moveTo(400, 60);
context.lineTo(360, 140);
context.lineTo(240, 135);
context.lineTo(180, 60);
context.closePath();
context.stroke();
context.fill();

这就形成了这个形状

我试图实现的是让左下角和右下角都是圆角，而不是顶部

如果删除线条连接，则圆角将消失

那么，如何设置lineJoin应该运行的点

非常感谢。

使用我在本例中使用的方法检查。不幸的是，您无法更改连接类型“中间形状”，但是您可以实际绘制圆角路径

const canvas=document.querySelector（“canvas”）；
const ctx=canvas.getContext（“2d”）；
canvas.width=canvas.height=800；
//设置矩形和角点值
常数角半径=1；
ctx.lineWidth=50；
ctx.beginPath（）；
ctx.moveTo（180,60）；
ctx.lineTo（400,60）；
四次曲线（400,60,400,60）；
ctx.lineTo（360、140-转弯半径）；
ctx.直角曲线（360，140，360-角半径，140）；
ctx.lineTo（240+转弯半径，135）；
ctx.直角曲线（240，135，240，135-转弯半径）；
ctx.lineTo（180,60）；
ctx.closePath（）；
ctx.stroke（）；
ctx.fill（）
取决于您尝试执行的操作，使用
上下文.drawImage
函数可能更容易。@luekbaja我认为目前还不能选择，因为我打算在将来将其转换为可重用组件。此答案显示了如何向任何多边形添加圆角corned，包括代码。