Tag: HTML5

HTML5 is a markup language used for structuring and presenting content for the World Wide Web and a core technology of the Internet. HTML5 is the latest standard for HTML.

Some of the most interesting new features in HTML5 are:

– The canvas element for 2D drawing
– The video and audio elements for media playback
– Support for local storage
– New content-specific elements, like article, footer, header, nav, section
– New form controls, like calendar, date, time, email, url, search

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>