title: How to make the line red and blue?
body: <p>I have <a href="https://jsfiddle.net/1xcdLtv8/" rel="nofollow noreferrer">this code</a>, which is working fine for pathing:</p>
  
  <p><a href="https://i.stack.imgur.com/r55CX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r55CX.png" alt="enter image description here"></a></p>
  
  <p>But i need begin RED and the end line BLUE, i tried by putting context.strokeStyle = 'blue'; but it failed.</p>
  
  <p>Do you know how you can do that?</p>
  
  <pre><code>canvas.width = canvas.height = 500;
  var context = canvas.getContext('2d');
  var shape = new Path2D();
  
  function init(){
  context.lineWidth = 1;
  context.strokeStyle = 'red';
  
  
  // RED RED RED
  shape.moveTo(100,20);
  shape.lineTo(200, 160);
  shape.quadraticCurveTo(0, 200, 250, 120);
  shape.bezierCurveTo(290, -40, 300, 200, 400, 150);
  
  
  // BLUE BLUE
  //---- make this BLUE BLUE BLUE BLUE not RED RED RED
  //---- make this BLUE BLUE BLUE BLUE not RED RED RED
  // line 2 
  //---- make this BLUE BLUE BLUE BLUE not RED RED RED
  //---- make this BLUE BLUE BLUE BLUE not RED RED RED
  shape.lineTo(500, 90);
  
  draw();
  }    
  
  var pos = 0;
  var l = 760;
  function draw() {
      context.clearRect(0,0,canvas.width, canvas.height);
      context.setLineDash([pos, l-pos]);
      context.stroke(shape);
      pos = pos+3;
      if(pos &gt;= l){
          blink();
          return;
          }
      requestAnimationFrame(draw);
  };
  var i = 0;
  function blink(){
      context.clearRect(0,0,canvas.width, canvas.height);
      if((++i % 30) &gt; 15){
          context.stroke(shape);
          }
  
      requestAnimationFrame(blink);
      };
  init();
  </code></pre>