title: HTML Canvas: How to color area under a line graph?
body: <p>I am trying to create a mountain graph (line chart and area underneath is shaded) however, no matter what I try, the shaded area is not covering the whole area. Because my chart is an open path so fill results in area which is going through the chart line.</p>
  
  <p><a href="https://i.stack.imgur.com/8Cn9a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Cn9a.png" alt="enter image description here"></a></p>
  
  <p>Below is a sample code that I put on W3School to show the problem.</p>
  
  <p>I also saw some other questions on same lines, but following them too is resulting in same problem. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(0,150);
  ctx.lineTo(100,70);
  ctx.lineTo(150,100);
  ctx.lineTo(200,140);
  ctx.lineTo(250,90);
  ctx.lineTo(300,110);
  ctx.fillStyle ="red";
  ctx.fill();
  ctx.stroke();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"&gt;
  Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>