HTML5 Game - Canvas Animation Spinning text

Description

Spinning text
Demo

<!DOCTYPE html>
   <head>
      <style>
        #canvas {//from   w  w w  .  j a v a 2s. co m
              border: 1px solid cornflowerblue;
        }
      </style>
   </head>

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

      <script>
let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    text='Click to spin',
    angle = Math.PI/50,
    clockwise = true,
    fontHeight = 128,
    origin = { },
    paused = true,
    scale = 1.008;


canvas.onclick = function() {
   paused = !paused;
   if (!paused) {
      clockwise = !clockwise;
      scale = 1/scale;
   }
};

setInterval(function() {
   if (!paused) {
      context.clearRect(-origin.x, -origin.y,
                        canvas.width, canvas.height);

      context.rotate(clockwise ? angle : -angle);
      context.scale(scale, scale);

      context.fillText(text, 0, 0);
      context.strokeText(text, 0, 0);
   }
}, 1000/60);

context.font = fontHeight + 'px Palatino';

context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'yellow';

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

context.textAlign = 'center';
context.textBaseline = 'middle';

origin.x = canvas.width/2;
origin.y = canvas.height/2;

context.transform(1, 0, 0, 1, origin.x, origin.y);

context.fillText(text, 0, 0);
context.strokeText(text, 0, 0);

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