Javascript 贝塞尔曲线辅助

我正在尝试使用我的贝塞尔曲线，并在中心添加更多的曲线（见图）。

目前，我的贝塞尔曲线不太弯曲。我试着把各种各样的数字弄得乱七八糟，但我一无所获。请看我的小提琴档案：

相关代码：

var rect1 = {
  x: 103,
  y: 262,
  w: 200,
  h: 100,
};

var rect2 = {
  x: 484,
  y: 170,
  w: 200,
  h: 100,
}

function drawBezier() {
  context.beginPath();
  context.moveTo(rect2.x + rect2.w/2, rect2.y + rect2.h/2);
  context.bezierCurveTo(434,314,354,218, rect1.x+rect1.w/2, rect1.y +rect1.h/2);
  context.lineWidth = 20;
  context.strokeStyle = 'white';
  context.stroke();
}

---

我的猜测是，如果您想要贝塞尔曲线的这种形状，您不应该使用矩形的中心，而是首先检索矩形的哪一侧（边）朝向（连接），在上面的示例中，它是Box1'右边缘连接到Box2左边缘。之后，使用边的中心作为bezier曲线的起点/终点，根据连接的边可以添加中间点（如果右边连接到左边或上/下边，则可能不同）。

…并且可以通过使控制点更靠近相对的矩形来增加“曲线度”。-）我已经根据@Isotropix thinks更新了小提琴