title: canvas color gradient animation error :Failed to execute 'createRadialGradient': The provided double value is non-finite
body: <p>I am trying to review what I have learned and intend to make just a single circle color gradient animation, this error still comes up as always which is kinda confused me. The scripts are as following:</p>
  
  <pre><code>canvas = document.getElementById('myCanvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  console.log(canvas.width,canvas.height);
  
  
  ctx = canvas.getContext('2d');
  function drawCircle(x,y,r){
      ctx.clearRect(0,0,canvas.height,canvas.width);
      requestAnimationFrame(drawCircle);
  
      var grad = ctx.createRadialGradient(x,y,0,x,y,r);
      var colorArray = ['blue','yellow','green','red','grey'];
      grad.addColorStop(0,colorArray[Math.floor(Math.random()*colorArray.length)]);
      grad.addColorStop(.3,colorArray[Math.floor(Math.random()*colorArray.length)]);
      grad.addColorStop(.5,colorArray[Math.floor(Math.random()*colorArray.length)]);
      grad.addColorStop(.6,colorArray[Math.floor(Math.random()*colorArray.length)]);
      grad.addColorStop(.9,colorArray[Math.floor(Math.random()*colorArray.length)]);
  
      ctx.beginPath();
      ctx.arc(x,y,r,0,Math.PI*2);
      ctx.fillStyle = grad;
      ctx.fill();
  }
  
  drawCircle(100,100,20);
  </code></pre>
  
  <p>would anyone please check this for me?</p>