Home/ Questions/Q 1033865
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T14:17:54+00:00

I am trying to draw two parallel lines on the canvas, but it seems

  • 0

I am trying to draw two parallel lines on the canvas, but it seems like properties of the latter overwrites the former. Please suggest what could be wrong :

<html>
<head>
<script type="application/javascript">
  function draw() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    // draw a 10 pix green line
    ctx.strokeStyle='#00cc00';
    ctx.lineWidth=10;
    ctx.moveTo(100,0);
    ctx.lineTo(100,1000);
    ctx.stroke();
    // draw a 20 pix red line
    ctx.strokeStyle='#cc0000';
    ctx.lineWidth=20;
    ctx.moveTo(140,0);
    ctx.lineTo(140,1000);
    ctx.stroke();
  }
  </script>
  </head>
  <body onload="draw()">
    <div><canvas id="canvas" width="1000" height="1000"></canvas></div>
  </body>
  </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Call ctx.beginPath before drawing each line. When the strong stroke call is made, the first line is still part of the current path so it gets drawn again in the new color.

    • 0