HTML 5: Draw the Grid lines on the Canvas

This article demonstrates how can we draw the grid lines on the HTML 5 canvas object. You can See the below demo in which you can reset the thickness and size of the grid lines from the drop down options. Continue reading “HTML 5: Draw the Grid lines on the Canvas”

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>