Canvas Tag in HTML5

In this article I am going to describe how to use canvas tag in HTML5.
  • 1322

Canvas Tag

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript) to actually draw the graphics .<canvas> tag is introduced in HTML5.

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images. The text between <canvas> and </canvas> is rendered as is in the browsers that do not have canvas support. In other words we can say that any content between the <canvas></canvas> tags is "fallback content"- meaning, it will be displayed only if the canvas cannot be displayed.

Browser Supporting Canvas Tag

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <canvas> element.

NOTE: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Attributes used along with Canvas Tag

    Attribute                        Description
    Width Specifies the canvas width in pixels.

Possible values: Non-Negative Integer

    Height Specifies the canvas height in pixels.

Possible values: Non-Negative Integer

Steps for implementation of the canvas

  • Create a Canvas

          A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element. You can have multiple <canvas> elements on one HTML page.

             Note: By default, the <canvas> element has no border and no content.

             For Example

             <canvas id="myCanvas" width="200" height="100"></canvas>

  • Draw on the Canvas

             All drawing on the Canvas is done inside the javascript.

  •  To draw line on the canvas we will use the two method.

                       moveTo(x,y): It defines the starting point of the line.

                       lineTo(x,y): It defines the ending point of the line.

  •  To draw a circle on the canvas we will use the following method.

                      arc(x,y,r,start,stop)

              To actually draw the circle, we must use one of the methods, like stroke() or fill().

  •  To draw the the text on the canvas

                      font - defines the font properties for text.

                      fillText(text,x,y) - Draws "filled" text on the canvas.

                      strokeText(text,x,y) - Draws text on the canvas (no fill).

  •  To draw an image on the canvas

                       drawImage(image,x,y).

Example of Canvas Tag in HTML5

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Canvas Tag in HTML5</title>

</head>

<body>

    <h1>Implementation of Canvas Tag in HTML5</h1>

    <img id="Tulip" src="/C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" alt="Flower" width="180" height="200" />

    <canvas id="myCanvas" width="200" height="200" style="border: 1px solid Black"></canvas>

    <script type="text/javascript">

        //Draw onto canvas

        var canvas = document.getElementById('myCanvas');

        var context = canvas.getContext('2d');

        context.fillStyle = 'red';

        context.fillRect(25, 50, 150, 75);

        //Give a cap style to Canvas Line.

        context.beginPath();

        context.moveTo(50, 10);

        context.lineTo(150, 10);

        context.lineWidth = 10;

        context.strokeStyle = "blue";

        context.lineCap = "butt";

        context.stroke();

 

        context.beginPath();

        context.moveTo(50, 30);

        context.lineTo(150, 30);

        context.lineWidth = 10;

        context.strokeStyle = "blue";

        context.lineCap = "round";

        context.stroke();

 

        context.beginPath();

        context.moveTo(50, 50);

        context.lineTo(150, 50);

        context.lineWidth = 10;

        context.strokeStyle = "blue";

        context.lineCap = "square";

        context.stroke();

        //Create a circle with the arc() method.

        var c = document.getElementById("myCanvas");

        var ctx = c.getContext("2d");

        ctx.beginPath();

        ctx.arc(95, 92, 30, 0, 2 * Math.PI);

        ctx.stroke();

 

        //Draw fillText(text,x,y) on Canvas.

        var c = document.getElementById("myCanvas");

        var ctx = c.getContext("2d");

        ctx.font = "30px Arial";

        ctx.fillText("Hello World", 20, 160);

        var img = document.getElementById("Tulip");

        context.drawImage(img, 50, 50);

    </script>

</body>

</html>

 

Output

canvas.jpg

© 2019 DotNetHeaven. All rights reserved.