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 HTML5 Canvas element. A Canvas element provides a way to draw 2D graphics on the fly on the browser.

To declare a canvas inside a HTML, use 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. Its 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 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 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 colors.

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

Lets draw a circle inside canvas. Call context’s arc() method to draw a circle. To fill the circle, you can use the fillstyle() to set your desired fill color 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 drawing.

Lets 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.

Lets 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 piece together.
html5-canvas-to-image-file

Complete Code:










Sorry, no canvas available

Download above area as Image



We bring the latest tech, software news and stuff that matters. Stay in touch via Telegram, Twitter, YouTube, and Facebook and never miss an update!

Join our Telegram channel and stay informed on the move.

Also Read

SEE ALSO:   Show and Serve Ads inside HTML5 Video

Like it? Share with your friends!

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