Tag Archives: canvas in html5

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>

Text Animation in HTML5

You can create text marquee (i.e. scrolling text left to right and right to left on the canvas) and can create a text animation such as text rotation, text highlight etc.

The article demonstrate the following text animations on the canvas. See the Demo.

All example, displays the text “Welcome” in the various animation. In the first example the text “welcome” is scrolling continuously left to right on the other hand in the second example text is scrolling right to left.And in the third example the text spins in starting small and growing to its full size as it spins. The forth animation displays text small to big size.

Examples with code

The below example shows us how to scroll the text left to right on the canvas in HTML5 without using any CSS.

Example 1 – Scrolling text left to right in HTML5

The following example display a similar result to the above method but in this example text scrolls top to bottom.

Example 2 -Scrolling text top to bottom in HTML5

The Following example gives you an idea to scrolling the text on the canvas in HTML 5.

Example 2 -Scrolling text right to left in HTML5

Example 4 -Text rotation in HTML5

Example 5 -Text animation small to its full size in HTML5

The following code example demonstrates how to text fade in and fade out effect on the canvas in HTMl5.

Example 6 – Text fade-in and fade-out in HTML5

Thanks

Draw Text on canvas in HTML5

 
You can draw the text on the HTML5 canvas, for it we use the following JavaScript method:
 
fillText(text, x, y [,maxWidth]) method fills the text in the current fill style.
strokeText(text, x, y [,maxWidth]) method outlines the text in the current stroke style.
 

Both methods uses the following arguments:

text: The text to draw into the context.
x: The X coordinate at which to begin drawing.
y: The Y coordinate at which to begin drawing.
maxWidth(Optional): the maximum width to draw.
 
we use the font property of the canvas context to set the font of the drawn text that will contains the font style, size, and family name.
 


Draw text on canvas html5

 

Example

The following example will draw the string ‘Welcome’ on the canvas.

<html>
<head>
  <title>Draw text</title>
    <style type="text/css">
        #MyCanvas {border:1px solid black;}
    </style>
  <script type="text/javascript">
      function drawText() {
          var ctx;
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              ctx = canvas.getContext("2d");
              ctx.font = "15pt verdana";
              ctx.fillText("Welcome", 100, 100);
          }
      }
  </script>
</head>
<body onload="drawText();">
  <canvas id="MyCanvas" width="350" height="200">
  This browser or document mode doesn't support canvas object</canvas>
 </body>
</html>