Text rotation and scale in HTML5

The following code example demonstrates how to rotate and scale text on the canvas in HTML5. In the example, text is scaled and rotated repeatedly. The rotation starts with 0 to 2 x Pi radians and in each step increment is 2 * Pi / steps. A scale increment of 1 / steps is calculated, so the scale will grow to 1 in steps.

See the Demo.

<html>
<head>
    <title>Text Animation</title>
    <style>
        canvas{border: 1px solid #bbb;}
        .subdiv{width: 320px;}
        .text{margin: auto; width: 290px;}
    </style>
 
    <script type="text/javascript">
        var can, ctx, addAngle, addScale, step, steps = 150,
              delay = 20;
 
        function init() {
            can = document.getElementById("MyCanvas1");
            ctx = can.getContext("2d");
            ctx.fillStyle = "red";
            ctx.font = "20pt Helvetica";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            addAngle = Math.PI * 2 / steps;
            addScale = 1 / steps;
            step = 0;
            RotateTextSphere()
        }
 
        function RotateTextSphere() {
            step++;
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.save();
            ctx.translate(can.width / 2, can.height / 2);
            ctx.scale(addScale * step, addScale * step);
            ctx.rotate(addAngle * step);
            ctx.fillText("Welcome", 0, 0);
            ctx.restore();
           if (step < steps)
                var t = setTimeout('RotateTextSphere()', 20);
        }
 
    </script>
 
</head>
<body onload="init();">
    <div class="subdiv">
        <canvas id="MyCanvas1" width="300" height="200">
  This browser or document mode doesn't support canvas object</canvas>
        <p class="text">
         Example - Text Rotation in HTML5
        </p>
    </div>
</body>
</html>