title: CSS convert gradient to the canvas version
body: <p>I have a gradient that I need to apply to a canvas. </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-css lang-css prettyprint-override"><code>section {
    width: 440px;
    height: 171px;
    background-image: linear-gradient(185deg, #39adb2 0%, rgba(255, 255, 255, 0.24) 100%), linear-gradient(to top, rgba(152, 227, 230, 0.18) 0%, rgba(196, 229, 255, 0) 99%, rgba(196, 229, 255, 0) 100%);
    opacity: 0.48;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;&lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need help to convert this to the canvas API; I don't have a clue how to do it. maybe there is an online tool? </p>
  
  <pre><code>  var gradientFill = ctx.createLinearGradient(100, 10, 100, 100);
    gradientFill.addColorStop(0, "#39adb2");
    gradientFill.addColorStop(0.99, "rgba(196, 229, 255, 0)");
    gradientFill.addColorStop(1, "rgba(196, 229, 255, 0)");
    gradientFill.addColorStop(0, "#39adb2");
    gradientFill.addColorStop(1, "rgba(152, 227, 230, 0.18)");
  </code></pre>