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.
Example to draw a Line over HTML5 Canvas?
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 HTML5 Canvas?
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 HTML5 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 HTML5 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 HTML5 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);