HTML5 Canvas gradient appears black
<p>I'm trying to reproduce the following background image in an HTML5 canvas, however what renders on the browser is a black box. The original image was made in illustrator and that's where I'm getting the coordinates from (actually used an export plug-in).</p>

<pre><code>&lt;html lang="en"&gt;
 &lt;head&gt;
  &lt;meta charset="UTF-8" /&gt;
  &lt;title&gt;index&lt;/title&gt;
  &lt;script&gt;

    function init() {

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      draw(ctx);
    }

    function draw(ctx) {

      var gradient;

      // layer1/Red Background Bottom
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(1036.0, 789.7);
      ctx.lineTo(12.0, 789.7);
      ctx.lineTo(12.0, 21.7);
      ctx.lineTo(1036.0, 21.7);
      ctx.lineTo(1036.0, 789.7);
      ctx.closePath();
      ctx.fillStyle = "rgb(235, 10, 10)";
      ctx.fill();

      // layer1/Shadow Bottom
      ctx.beginPath();
      ctx.moveTo(1036.0, 788.7);
      ctx.lineTo(12.0, 788.7);
      ctx.lineTo(12.0, 20.7);
      ctx.lineTo(1036.0, 20.7);
      ctx.lineTo(1036.0, 788.7);
      ctx.closePath();
      ctx.save();
      ctx.transform(3.200, 0.000, 0.000, -4.206, 196.6, -5329.4);
      gradient = ctx.createRadialGradient(96.7, -1580.0, 0.0, 96.7, -1580.0, 161.7);
      gradient.addColorStop(0.00, "rgb(0, 0, 0)");
      gradient.addColorStop(0.55, "rgb(0, 0, 0)");
      gradient.addColorStop(1.00, "rgb(0, 0, 0)");
      ctx.fillStyle = gradient;
      ctx.fill();
      ctx.restore();
      ctx.restore();
    }
  &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="init()"&gt;
   &lt;canvas id="canvas" width="1049" height="792"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><BR>
<strong>EDIT:</strong>
Actually I just realized that I forgot to add the Alphas in the gradient stops, the change below solves the problem:</p>

<pre><code>      gradient.addColorStop(0.00, "rgba(0, 0, 0,0)");
      gradient.addColorStop(1.00, "rgba(0, 0, 0, 0.5)");
</code></pre>

<p><a href="https://i.stack.imgur.com/8uSrT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8uSrT.png" alt="enter image description here"></a></p>