Exploring the HTML5 Canvas Element with Examples

Introduction:

This article will explain the basic terminology and working on canvas using HTML 5. The canvas is an HTML element which can be used to draw graphics on the web page via scripting language. Mainly we will use Java script as scripting language.

Description:

The element is only a container for graphics; we must use a script to actually draw the graphics.
Basically a canvas is a drawable region defined in HTML code with height and width attributes.
Canvas uses several methods for drawing custom Shapes (Circle, Semicircle, Rectangle, and Square) characters, and adding images.
First of all we’ll need to place the canvas tag somewhere inside our HTML, create an initializer JavaScript function that accesses the canvas tag once the page loads, and then utilize the HTML5 Canvas API to draw your visualizations.
The IE9, Chrome, Mozilla Firefox, Opera and Safari support the tag.

Creating Canvas

A canvas is starts with the element. It contains the id, width, and height of the element.

Example-

Canvas width-Width of region
Canvas Height -Length of region

Note- The element has no drawing abilities of its own. All drawing must be done inside a JavaScript.

Drawing Shapes - Here, we need to understand about the canvas coordinate space. Generally 1 unit in the space corresponds to 1 pixel on the canvas. The origin of this space is positioned in the center (coordinate (0,0)). All elements are placed relative to this origin.

Drawing Rectangle - we have to use the rect() method. An HTML5 Canvas rectangle is positioned by the x and y parameters, and is sized with the width and height parameters. Sample will be like this:

<script>
context.rect(x, y, width, height);
</script>

Listing 1:Script for creating Rectangle using HTML 5

<!DOCTYPE html>
<html>
<body>
<canvas id="UgCanvas" width="300" height="200" style="border:1px solid #c6c6c6;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("UgCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#7F7F00";
ctx.fillRect(0,0,150,100);
</script>
</body>
</html>

Figure 1: Output Rectangle drawing using HTML 5 canvas

Circle Drawing -, we can create an arc using the arc() method and define the starting angle as 0 and the ending angle as 2 * PI(22/7).Sample will be like this:

<script>
  context.arc(x, y, radius, 0 , 2 * Math.PI, false);
</script>

Listing 2: Script for creating Circle using HTML 5

<!DOCTYPE html>
<html>
<body>
<canvas id="UgCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("UgCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#7F7F00";
ctx.beginPath();
ctx.arc(90,50,50,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>

Figure 2: Output of circle drawing using HTML 5 Canvas.

Path(Line) Drawing -To create a Path using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods.Sample will be like this:

<script>
context.beginPath();
context.moveTo(x,y);
context.lineTo(x,y);
context.stroke();
</script>

Listing 3: Script for creating Path(Lining) using HTML 5

<!DOCTYPE html>
<html>
<body>
<canvas id="UgCanvas" width="300" height="200" style="border:1px solid #c6c6c6;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("UgCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(150,50);
ctx.lineTo(50,160);
ctx.stroke();
</script>
</body>
</html>

Figure 3: Output of pathline using HTML 5 Canvas

Drawing text - (HTML5 Canvas Text Font, Size, and Style)

Here, we have to use the font property of the canvas context. The style can be normal, italic, or bold.by default font size is normal. Sample will be like this:

<script>
context.font = 'italic 40px Calibri';
</script>

Listing 4: Script for creating Path(Lining) using HTML 5

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("UgCanvas");
        var context = canvas.getContext("2d");

        context.font = "italic 40pt arial";
        context.fillText("Canvas Tutorial.", 10, 100);
      };

    </script>
  </head>
  <body>
    <canvas id="UgCanvas" width="400" height="200" style="border:1px solid #c6c6c6;"></canvas>
  </body>
</html>

Figure 4: Output of path line using HTML 5 Canvas

Conclusion

These examples are the basic implementation of canvas using HTML 5. On large scale you can do more additional things like Drawing Custom Shapes , Image coloring ,Text coloring, Image cropping,Text Wrapping,Text metrics, Patterning, Line coloring, line joining .

As usual, please comment if you have any questions regarding this tutorial.