672646-alpha-radial-gradient.html

Enable keyboard shortcuts

<!doctype html>

<head>

  <style>

  body {

    background-color: blue;

  </style>

<body>

  <canvas id="mycanvas" width="200" height="200"></canvas>

  <script type="text/javascript">

  var cx = document.getElementById('mycanvas').getContext('2d');

  var g = cx.createRadialGradient(100, 100, 50, 100, 100, 75);

  g.addColorStop(0, 'rgba(100%, 100%, 0%, 0.5)');

  g.addColorStop(1, 'rgba(100%, 100%, 0%, 0)');

  cx.fillStyle = g;

  cx.fillRect(0, 0, 200, 200);

  cx.beginPath();

  cx.arc(100, 100, 80, 0, Math.PI*2, true);

  cx.closePath();

  cx.fillStyle = "white";

  cx.fill();

  </script>