Category Archives: HTML5

HTML 5 is the advanced version of the HTML. HTML5 adds many new syntactic features. These include the new , and elements, Other new elements are , , and etc. HTML 5 supports the various programming APIs that can be used with the help of JavaScript such as .

The canvas element (For 2D drawing), Timed media playback, Offline Web Applications, Drag-and-drop,Document editing, Microdata, Browser history management,Web Storage,
file API,File Writer and Web Audio API etc.

Learn the HTML 5

Canvas
Start with canvas
Draw Path and Lines
Draw paths
Lines
Arcs
Stroke and Fill Style
Bezier Curves
Quadratic Curve
Draw Shapes
Rectangle and Circle
Custom Shapes
Gradients Styles
Linear gradient
Radial gradient
Text
Draw Text
Style and Setting
Text animation
HTML 5 supported APIs
GeoLocation API
Animation
A Simple Example

Set size of an image in the HTML5 canvas

The canvas size and image size both are different things. The canvas is the DOM element in the HTML5 that allows drawing the 2D shapes and bitmap images. To draw the image on the canvas, it should be checked that what the dimensions of the loaded image is, and if the original image’s height and width are greater than the canvas’s height and width, Continue reading Set size of an image in the HTML5 canvas

Working with input type color in HTML5

The input type=color is one of the new input types of the HTML5. This input type allows the user to select a color with the help of color picker and returns the hexadecimal value for the selected color. You will see how to use and how to get the value of the selected color in the Example 1. You can also check the functionality in the Demo section, where you can change the background and border of the div tag. Try the Demo. Continue reading Working with input type color in HTML5

Invert image using the HTML5 canvas

In HTML5 canvas’s 2D context support three methods that can draw pixel by pixel: createImageData, getImageData, and putImageData. With the help of these methods you can filtering the image on the canvas such as inversion of the image. The following code section will show you that how can you invert the image on canvas. Continue reading Invert image using the HTML5 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>

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