Animated gradient

by Simon Hi

HTML

<p>
  Click on the button below to start the animation !
</p>
<button onclick="start()">Do it</button>
<canvas id="x"></canvas>

CSS

button {
  display: block;
  font-size: 2em;
  width: 100px;
  margin: 0 0 0.5em 0;
}

JavaScript

var z, i;

var shape = function() {
  var canvas = document.getElementById("x");
  var context = canvas.getContext("2d");
  var grd;
  context.beginPath();
  context.arc(50, z, 50, 0, 2 * Math.PI);
  //context.rect(0, z, 100, 350 - z);
  //context.arc(50, 350, 50, 0, 2 * Math.PI);
  grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
  grd.addColorStop(0.2, '#FF6EFC');
  grd.addColorStop(1, '#680E61');
  context.fillStyle = grd;
  context.fill();
  if (z == 50) clearInterval(i);
  else z--;
}

var start = function() {
  var canvas = document.getElementById("x");
  canvas.height = "400";
  canvas.width = "100";
  z = 350;
  if (i) clearInterval(i);
  i = setInterval(shape, 10);
}