Text animation small to its full size in HTML5

See the Demo.
 

<html>
<head>
    <title>Text small to big Animation</title>
       <script type="text/javascript">
       var can, ctx, step = 10, steps = 50;
              delay = 20;
 
        function init() {
            can = document.getElementById("MyCanvas");
            ctx = can.getContext("2d");
            ctx.fillStyle = "blue";
            ctx.font = "10pt Helvetica";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            TextSmallToBig();
        }
        function TextSmallToBig() {
            step++;
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.save();
            ctx.translate(can.width / 2, can.height / 2);
            ctx.font = step + "pt Helvetica";
            ctx.fillText("Welcome", 0, 0);
            ctx.restore();
            if (step < steps)
                var t = setTimeout('TextSmallToBig()', 20);
        }
    </script>
 
</head>
<body onload="init();">
          <canvas id="MyCanvas" width="300" height="200">
  This browser or document mode doesn't support canvas object</canvas>
</body>
</html>

4 thoughts on “Text animation small to its full size in HTML5”

      1. Thank you so much Hirendra, I was able to find the “rotation & scaling” example, also thanks for making these codes, I found them very productive and brilliant.

Comments are closed.