HTML5画布如何填充鼠标绘制的三角形

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var isDrawing = false;
var startX, startY;

canvas.addEventListener("mousedown", function(e) {
  isDrawing = true;
  startX = e.clientX - canvas.offsetLeft;
  startY = e.clientY - canvas.offsetTop;
});

canvas.addEventListener("mousemove", function(e) {
  if (!isDrawing) return;
  var currentX = e.clientX - canvas.offsetLeft;
  var currentY = e.clientY - canvas.offsetTop;
  // 绘制三角形的逻辑
});

canvas.addEventListener("mousemove", function(e) {
  if (!isDrawing) return;
  var currentX = e.clientX - canvas.offsetLeft;
  var currentY = e.clientY - canvas.offsetTop;

  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(currentX, currentY);
  ctx.lineTo(startX + (startX - currentX), currentY);
  ctx.closePath();
  ctx.fillStyle = "red";
  ctx.fill();
});