如何在第一个点和最后一个点之间动态绘制直线？

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

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

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

var startX = 50; // 起始点的X坐标
var startY = 50; // 起始点的Y坐标
var endX = 450; // 结束点的X坐标
var endY = 450; // 结束点的Y坐标

function drawLine() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.stroke();
}

setInterval(function() {
  // 更新结束点的坐标，可以根据需要进行计算或其他方式获取新的坐标值
  endX = Math.random() * canvas.width;
  endY = Math.random() * canvas.height;
  drawLine();
}, 1000);