HTML5 Game - Canvas Animation Telescoping

A telescoping animation implemented with the clipping region

Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Telescoping with the Canvas clip region</title>
      <style>
         #canvas {//w w w.  j  av  a  2  s .  co  m
            margin-left: 10px;
            margin-top: 10px;
            background: #eeeeee;
            border: thin solid #aaaaaa;
            box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;
         }
      </style>
   </head>

   <body>
        <canvas id='canvas' width='600' height='420'>
         Canvas not supported
        </canvas>

      <script>
        let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

function drawText() {
   context.save();
   context.shadowColor = 'rgba(100, 100, 150, 0.8)';
   context.shadowOffsetX = 5;
   context.shadowOffsetY = 5;
   context.shadowBlur = 10;

   context.fillStyle = 'cornflowerblue';
   context.fillText('HTML5', 20, 250); 
   context.strokeStyle = 'yellow';
   context.strokeText('HTML5', 20, 250);
   context.restore();
}

function setClippingRegion(radius) {
   context.beginPath();
   context.arc(canvas.width/2, canvas.height/2,
               radius, 0, Math.PI*2, false);
   context.clip();
}

function fillCanvas(color) {
   context.fillStyle = color;
   context.fillRect(0, 0, canvas.width, canvas.height);
}

function endAnimation(loop) {
   clearInterval(loop);

   setTimeout( function (e) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawText();
   }, 1000);
}

function drawAnimationFrame(radius) {
   setClippingRegion(radius);
   fillCanvas('lightgray');
   drawText();
}

function animate() {
   let radius = canvas.width/2,
       loop;

   loop = window.setInterval(function() {
      radius -= canvas.width/100;

      fillCanvas('charcoal');

      if (radius > 0) {
         context.save();
         drawAnimationFrame(radius);
         context.restore();
      }
      else {
         endAnimation(loop);
      }
   }, 16);
};

canvas.onmousedown = function (e) {
   animate();
};

context.lineWidth = 0.5;
context.font = '128pt Comic-sans';
drawText();

        </script>
   </body>
</html>