You must remember in the early age of HTML to draw graphics in a Web page generally we use GIF images or Flash animations. Here the major drawback is image based animations are not at all SEO friendly. Search engine are unknown about the anatomy of the animation. Looking into this the 5th generation of HTML introduced Canvas. Canvas is a rectangular area in a HTML page. Which we can define using two dimensions X & Y. By default a Canvas is not having any border or content. To draw graphics using a Canvas we required the help of Scripting language. By own Canvas is acts like a Container. Look at the below HTML5 Canvas Examples to know how draw shapes over a Canvas.
Using a Canvas we can draw graphics like lines, boxes, circles, rectangles, squares, polygons, tingles, texts or even can add images. All the latest browsers (Google Chrome 4.0 or above, IE 9.0 or above, Mozilla Firefox 2.0 or above, Safari 3.1 or above and Opera 9.0 or above) supports Canvas. Canvas is rich for high end graphics. Starting from an animation to develop a game Canvas is awesome. While SVG gives better results for Text rendering Canvas gives better results for Graphics.
The following Syntax we use to define a HTML5 Canvas.
<canvas id="mycanvas" width="300" height="250"> Your browser does not support HTML5 Canvas. </canvas>
Keep remember while defining a Canvas always assign an ID to your Canvas. ID helps to detect the Canvas during client Scripting. You can dynamically provide width and height to a Canvas but it is advisable to define width and height during you declare a Canvas. Going forward if required you can update this settings.
With the above introduction let us watch some real-time examples about how to draw various shapes on over a Canvas using Scripting language. Here in the below demo I am using the popular client scripting language JavaScript. In a HTML5 Canvas you are free to any scripting language.
Example to draw a Line over Canvas?
Look at the below Code. Here I am drawing a straight line using JavaScript over a Canvas. The logic I implemented here is so simple. Using getElementById I am detecting the Canvas control from my HTML page. Then defining dimensions using getContext() method. Then to define coordinates for the line using moveTo I am setting the line pointer to 0, 0 coordinate. Then for the end points using lineTo() method. Keep remember the lineTo() method is useful to draw lines. At last I am applying stroke to the line using stroke() method.
var d = document.getElementById("demoCanvas");
var dln = d.getContext("2d");
dln.moveTo(0,0);
dln.lineTo(200,100);
dln.stroke();
Example to draw a Rectangle over Canvas?
As we discussed above we can draw graphics on canvas using client scripts (JavaScript or Jquery). In the below example I used JavaScript to draw a rectangle. Here “mycanvas” is the id of HTML5 Canvas control. Using document object model (DOM) getElementById() method I am fetching the canvas control to my JavaScript code. Then using getContext(‘2d’) I am instructing my Canvas to draw 2D Graphs. To create a rectangle I used fillRect() method. Which accepts 4 parameters as x1, y1 & x2, y2 as the rectangle areas. To fill color to my Rectangle I am using fillStyle() method.
var mycanvas = document.getElementById('mycanvas');
var context = mycanvas.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(20, 20, 80, 80);
Example to draw a Circle over Canvas?
Similarly like a line to draw a Circle I am using arc() method. Arc() method accepts 6 parameters as x, y, radius, Starting Angle, Ending Angle & Counter Clockwise or Anti-Clockwise. Look at the example below how I did draw a Circle.
var d = document.getElementById("demoCanvas");
var dln = d.getContext("2d");
dln.beginPath();
dln.arc(95,50,40,0,2*Math.PI);
dln.stroke();
Example to draw a Text over Canvas?
To draw a text over Canvas generally we use FillText() method. FillText() accepts 3 parameters. First is the String which one you want to Draw as graphics. 2nd and 3rd parameters are the starting position of the text using X and Y coordinates. Additionally to define font size or font family we use font() method.
var d = document.getElementById(“demoCanvas”);
var dln = d.getContext("2d");
dln.font = "30px Arial";
dln.fillText("Hello World",10,50);
Example to draw Image over Canvas?
Keep remember you can’t directly insert an image to the Canvas. To display an image over a Canvas you have to Draw that image. To draw an image over a Canvas drawImage() method works. Like fillText() DrawImage() also accepts 3 parameters. First parameter is the image File path. 2nd & 3rd parameters are the starting point defined using X & Y Coordinates.
var d = document.getElementById("demoCanvas");
var dln = d.getContext("2d");
var img = document.getElementById("imgTag”);
dln.drawImage(img,10,10);
