HTML5 Холст рисования разноцветных линий

Я пытаюсь нарисовать две параллельные линии на холсте, но кажется, что свойства последнего перезаписывают первое. Пожалуйста, представьте, что может быть неправильным:

<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>

Ответы

Ответ 1

Вызовите ctx.beginPath, прежде чем рисовать каждую строку. Когда выполняется сильный вызов stroke, первая строка все еще является частью текущего пути, поэтому он снова рисуется в новом цвете.