    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>선 굵기 지정하기</title>
    </head>
    <body>
      <canvas id="myCanvas" width="700" height="400"
        style="border: 2px solid #cef"> </canvas>
      <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        for (let i = 1; i <= 25; i ++) {
          ctx.beginPath();
          ctx.moveTo(i * 25, 50);
          ctx.lineTo(i * 25, 350);
          ctx.strokeStyle = `rgb(${i * 10}, 0, 0)`;
          ctx.lineWidth = i;
          ctx.stroke();
        }
      </script>
    </body>
    </html>