如何在Canvas中绘制与浏览器Div一致的内圆弧及不等宽圆角边框？

需求说明 #

我需要在Canvas中绘制一个带有不等宽边框和圆角的矩形边框，要求显示效果和浏览器中配置相同参数的Div完全一致。目前不清楚截图中蓝色标记的内圆弧采用何种算法——是否为贝塞尔曲线？若是，请告知具体参数。另外，希望能获取Chrome或Firefox浏览器中此类圆弧绘制的代码实现细节。

浏览器示例代码 #

CSS 代码 #

.rect {
  width: 600px;
  height: 200px;
  background-color: red;
  border-style: solid;
  border-top-width: 150px;
  border-top-color: black;
  border-right-width: 10px;
  border-right-color: green;
  border-top-right-radius: 220px;
}

HTML 代码 #

<div class="rect"></div>

效果参考图 #

已尝试方案及问题 #

• 调整贝塞尔曲线各类参数，但始终存在微小误差，无法匹配浏览器效果
• 使用椭圆绘制曲线，与浏览器版本差异较大
• 目前通过将Canvas元素与Div叠加的方式校验绘制结果

内容的提问来源于stack exchange，提问作者Николай