Drawing in HTML5 using Canvas with Save as image feature

Advertisement

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


You may also like...

Translate »