HTML5 canvas线性渐变对我来说不起作用

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

  // 绘制线性渐变
  function drawLinearGradient(x1, y1, x2, y2, color1, color2) {
    const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
    gradient.addColorStop(0, color1);
    gradient.addColorStop(1, color2);
    ctx.fillStyle = gradient;
    ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
  }

  // 绘制矩形
  function drawRectangle(x, y, width, height, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, width, height);
  }

  // 绘制圆形
  function drawCircle(x, y, radius, color) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
  }

  // 绘制线性渐变矩形
  drawLinearGradient(10, 10, 100, 100, "rgb(200, 100, 100)", "rgb(300, 200, 200)");
  drawRectangle(10, 10, 100, 100, "rgb(200, 100, 100)");
  drawCircle(10, 10, 50, "rgb(200, 100, 100)");
</script>