如何创建一个矩形形状与一个三角形边与绘图中的笔画？

<canvas id="myCanvas" width="400" height="400"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置矩形的位置和尺寸
const rectX = 50;
const rectY = 50;
const rectWidth = 200;
const rectHeight = 100;

// 绘制矩形
ctx.fillStyle = 'red'; // 填充颜色
ctx.fillRect(rectX, rectY, rectWidth, rectHeight); // 填充矩形
ctx.strokeRect(rectX, rectY, rectWidth, rectHeight); // 绘制矩形的边框

// 创建一个路径
ctx.beginPath();
ctx.moveTo(300, 200); // 移动到起始点
ctx.lineTo(400, 200); // 绘制到第一个端点
ctx.lineTo(350, 100); // 绘制到第二个端点
ctx.closePath(); // 闭合路径

// 描边或填充路径
ctx.strokeStyle = 'blue'; // 边框颜色
ctx.lineWidth = 2; // 边框宽度
ctx.stroke(); // 描边路径
ctx.fillStyle = 'green'; // 填充颜色
ctx.fill(); // 填充路径