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.

    <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";
        function TextSmallToBig() {
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.translate(can.width / 2, can.height / 2);
            ctx.font = step + "pt Helvetica";
            ctx.fillText("Welcome", 0, 0);
            if (step < steps)
                var t = setTimeout('TextSmallToBig()', 20);
<body onload="init();">
          <canvas id="MyCanvas" width="300" height="200">
  This browser or document mode doesn't support canvas object</canvas>