Drawing in HTML5 using Canvas with Save as image feature

2 min


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.

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.

Your Browser does not support Canvas.

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

html5-canvas-to-image-file

This is how it would look like if you execute above all pieces together.

Complete Code:










Sorry, no canvas available

Download above area as Image



Arindam

Creator of debugpoint.com. All time Linux user and open-source supporter. Connect with me via Telegram, Twitter, LinkedIn, or send us an email.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
1
0
Would love your thoughts, please comment.x
()
x