This tutorial will explain how to draw various basic shapes and texts in the HTML5 Canvas element. A Canvas element provides a way to draw 2D graphics on the fly on the browser.
Table of Contents
HTML5 Canvas Drawing
To declare a canvas inside an HTML, use a tag, you can specify the height and width of the canvas while declaring the element.
Define a canvas
Below code snippet declares a canvas of size 500×200 with a solid border and its ID is ‘mycanvas’. This ID would be used to draw graphics later.
Declaring a doesn’t draw anything on it. It’s like an empty box. To draw or fill anything we need some JavaScript code.
First, we need to find the canvas mycanvas that we have declared in DOM and get the “2D” context.
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
Draw in a canvas
Once we get the context of the canvas drawing, we can start drawing. To draw a simple line of text, use the fillText(your_text, left, top) method.
ctx.font = “30px Arial”;
ctx.fillText(“This is a sample text”,170,170);
Draw a black border wrapping the entire canvas area. Canvas context’s rect method is used to define a rectangle area inside the canvas. It has four arguments – rect(x, y, width, height).
Once you define the area, you have to call stroke() method to draw.
ctx.beginPath();
ctx.lineWidth=1;
ctx.strokeStyle="black";
ctx.rect(2,5,494,494);
ctx.stroke();
Now we will draw two rectangles inside the canvas each with different colours.
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle="green";
ctx.rect(40,40,50,50);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle="orange";
ctx.rect(400,40,50,80);
ctx.stroke();
Let’s draw a circle inside canvas. Call context’s arc() method to draw a circle. To fill the circle, you can use them fillstyle() to set your desired fill colour and call the fill() method.
ctx.beginPath();
ctx.strokeStyle=”red”;
ctx.arc(250,75,50,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle=”red”;
ctx.fill();
Now we completed all the drawings.
Let’s say, we want the drawing should take place when we open the browser. Thus we have to draw during window.onload event of the browser using JavaScript.
Save the canvas as an image
HTML5 provides a way to save the entire canvas including its content as an image file. It provides a canvas method toDataURL() which captures entire canvas content as an image.
Let’s define a javascript function called download_my_canvas()
function download_my_canvas() {
var dt = mycanvas.toDataURL();
this.href = dt;
};
Define an anchor tag to provide a clickable link to the canvas image.
Download above area as Image
Finally, add an eventlistener to the click event of the link.
downloadLnk.addEventListener('click', download_my_canvas, false);
This is how it would look like if you execute above all pieces together.
Complete Code:
