title: Using gradients in HTML5 canvas
body: <p>I need to to draw a non-rectangular
  shape using lines. Then, add a vertical linear gradient to the shape with three color
  stops.</p>
  
  <p>I'm able to draw the shape but not getting the gradient.Can anyone help here?</p>
  
  <p>This is my code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;"&gt;
  Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;
  
  &lt;script&gt;
  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  
  // Create gradient
  var grd=ctx.createLinearGradient(0, 0, 200, 0);
  grd.addColorStop(0, "red");
  grd.addColorStop(0, "blue");
  grd.addColorStop(1, "white");
  
  // Fill with gradient
  ctx.fillStyle= grd;
  
  ctx.moveTo(0,0);
  ctx.lineTo(200,0);
  ctx.stroke();
  ctx.moveTo(200,0);
  ctx.lineTo(150,200);
  ctx.stroke();
  ctx.moveTo(150,200);
  ctx.lineTo(50,200);
  ctx.stroke();
  ctx.moveTo(50,200);
  ctx.lineTo(0,0);
  ctx.stroke();
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>