How to drawimage on HTML5 Canvas using Scripting?

In HTML5 Canvas is a newly introduced tag which consists of width & height attributes. It is specially designed to handle Graphics in HTML5. Canvas is a two-dimensional grid. We can draw graphs, animations, games & many other graphical shapes using JavaScript (Or any Client Side Scripts) on a Canvas. Canvas is the next generation of SVG. SVG supports vector based graphics where Canvas supports raster based graphics. SVG supports event handler while Canvas doesn’t supports event handling. Compare to SVG Canvas is less text rendering capability. Canvas renders pixel by pixel. Once we a draw a graphics in Canvas browser forget this. If we want to change or update some thing to the existing graphics on the canvas we need to re-draw the graphics once again.

How to declare a Canvas in HTML5?

Assume in your HTML page you want to draw a graph for area 300 x 250. In this case you can declare a canvas in HTML body part with width 300px & height 250px. Look at the sample below how to declare canvas element in a html document. Always practice to write “Your browser does not support HTML5 Canvas.” in between the canvas tag. This message will show if your browser not supports canvas.

<canvas id="mycanvas" width="300" height="250">
Your browser does not support HTML5 Canvas.
</canvas>

How to Draw a rectangle?

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);

While drawing graphics on a html page if required you can have multiple <canvas> elements in a single HTML5 page. Using different ids you can render each individual canvas from Client Scripts.

How to Draw a line?

In the below example I am drawing a line from the point 0, 0 to 200, 100. The method I used to draw the line is lineTo(x, y). Like the above here c is a JavaScript variable which holds the Canvas. Using getContext(‘2d’) I am instructing the canvas to draw 2d graphs. Here line is a 2d graph. To draw the line initially I set my starting point using moveTo() method. Then applying lineTo() method. This mean from 0,0 to 200, 100 line will draw.

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

How to Draw a Circle?

To draw a circle using HTML5 Canvas element look at the below example. Here I used Arc() method to draw a circle. HTML5 Canvas Arc() method accepts 6 parameters. Initial 2 parameters are for x & y axis. Third parameter is the radius of Arc. From the below code 0 & 2*Math.PI are the starting & ending angles. Last parameter of a Arc() method is a optional parameter. This param says is the Arc is clockwise or anti-clock wise. This parameter accepts Boolean values.

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI, true);
ctx.stroke();

How to print text using HTML5 Canvas?

To draw a text or label using HTML5 Canvas here I used fillText() method. Using font we can set style for our text. In the below example I declared font as “20px Arial”. It means while rendering font-size will show 20px & the font-family is Arial. FillText() method accepts 3 parameters. First one is the text string, I mean which text you want to display on your canvas. Then the 2nd & 3rd parameters says the position of text on Canvas.

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Arial";
ctx.fillText("Your Name",20,90);