title: HTML5 - Canvas: Draw text over gradient
body: <p>I want to write some text over a gradient (to make a scale):</p>
  
  <p>I have this so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" 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");
  // Create gradient
  var grd = ctx.createLinearGradient(0,0,500,0);
  grd.addColorStop(0,"red");
  grd.addColorStop(0.5,"yellow");
  grd.addColorStop(1,"green");
  // Fill with gradient
  ctx.font = "30px Arial";
  ctx.fillText("Hello World",10,50);
  ctx.fillStyle = grd;
  ctx.fillRect(0,0,500,100);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    
      
      &lt;canvas id="myCanvas" width="500" height="100" style="border:1px solid #d3d3d3;"&gt;
      Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can't see the text. How can I fix this?</p>
  
  <p>I want to create this:
  <a href="https://i.stack.imgur.com/bHbsh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bHbsh.png" alt="enter image description here"></a></p>
  
  <p>Where the circle is generated from some score that I give.</p>