title: HTML5 Canvas drawing multicolored lines
body: <p>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 :</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="application/javascript"&gt;
    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();
    }
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="draw()"&gt;
      &lt;div&gt;&lt;canvas id="canvas" width="1000" height="1000"&gt;&lt;/canvas&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>