HTML5 - Canvas: Draw text over gradient
<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>