Content - 4969a3250b470c53dd396a0c572b1ff7e51f7cb4 - 0c1a8e4/canvas/672646-alpha-radial-gradient.html

672646-alpha-radial-gradient.html

<!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>