Tutorial to create a circular progress bar with Canvas

09 / Jan / 2016 by Rumman Khan 0 comments

Canvas is a very powerful tool for drawing graphics using scripting but what it need a basic understanding of HTML and JavaScript.Basic description of Canvas is here:

The HTML5 Canvas element is an HTML tag like <div>, <a>,
or <table> tag, with the exception that its contents are rendered with JavaScript.

So, what I am sharing with you is a simple tutorial to create a circular progress bar with Canvas. As we all know that HTML5 has <progress> element to create a progress bar but to create a more interactive progress bar I recommend to use Canvas.

After reading some basic but useful information let’s start with our Progress bar tutorial:

Here’s what we get after creating it:-

progress_circle

Our Coding is divided into three parts:-

  • Variable Declaration
  • Creating a simple circle on Page.
  • Creating progress circle on that circle.

Here is the HTML snippet of Progress bar:-
Create a canvas element in your page like this:-


<canvas id="myCanvas" width="500" height="200"></canvas>

And after it let’s start with our Script tag:-

First Part starts Here:-


var canvas = document.getElementById('myCanvas'); // to get the element
var context = canvas.getContext('2d'); //to return drawing context on canvas
var al=0; // use it for Amount loaded
var start=4.72; //From where to start position of progress;
var cw=context.canvas.width/2; //to get x cordinate;
var ch=context.canvas.height/2; // to get y coordinate;

here width and height is divided by two so to get our progressbar in middle.

var diff; //to load progress bar Slowly

Second Part starts Here:-

Now comes our function which actually creating Progress Bar:-

 


function progressBar(){
 //calculated rate level to increase progress bar.

diff=(al/100)*Math.PI*2;

// to clear the whole canvas rect
 context.clearRect(0,0,400,200);

// simple create a basic circle

Second Part coding starts here:-

context.beginPath();

 

//formula of creating a circle in canvas like cw indicating x coordinate, ch indicating y coordinate,50 indicating radius,
0 indicating starting angle,2*Math.PI indicating end angle
False indicating anticlockwise direction.

 


context.arc(cw,ch,50,0,2*Math.PI,false);

context.fillStyle='#FFF'; // for color of circle
 context.fill(); // fill function
 context.strokeStyle='#e7f2ba'; // for border color
 context.stroke(); // Stroke function

 

Up to this point, a basic circle is created. Now, what we have to create is a progress bar circle.

Third part coding starts here:-


context.fillStyle='#000'; // For text color
 context.strokeStyle='#b3cf3c'; //For Stroke Color
 context.textAlign='center'; //you know already for aligning text in center;
 context.lineWidth=15; // for Stroke width
 context.font = '10pt Verdana'; // for font specifying
 context.beginPath(); // starting circle drawing function

 

//formula of creating a circle in canvas like cw indicating x coordinate, ch indicating y coordinate,50 indicating radius, start
indicating starting angle, diff+start indicating end angle
False indicating anticlockwise direction.

 

 


context.arc(cw,ch,50,start,diff+start,false);

context.stroke();// Stroke function

context.fillText(al+'%',cw+2,ch+6); //text value & text position

This condition is used to give limit to progress bar
 if(al>=56){
 clearTimeout(bar);
 }

al++; // increment the rate
 }

var bar=setInterval(progressBar,50); //to call progress bar function after every 50 miliseconds.

 

Code part is completed here.

Below I am giving you a full version of the code, copy and paste in your notepad and run the progress Bar on the browser and do some experiments with it.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Tutorial</title>
</head>
<body>

<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var al=0;
var start=4.72;
var cw=context.canvas.width/2;
var ch=context.canvas.height/2;
var diff;

function progressBar(){
diff=(al/100)*Math.PI*2;
context.clearRect(0,0,400,200);
context.beginPath();
context.arc(cw,ch,50,0,2*Math.PI,false);
context.fillStyle='#FFF';
context.fill();
context.strokeStyle='#e7f2ba';
context.stroke();
context.fillStyle='#000';
context.strokeStyle='#b3cf3c';
context.textAlign='center';
context.lineWidth=15;
context.font = '10pt Verdana';
context.beginPath();
context.arc(cw,ch,50,start,diff+start,false);
context.stroke();
context.fillText(al+'%',cw+2,ch+6);
if(al>=56){
clearTimeout(bar);
}

al++;
}

var bar=setInterval(progressBar,50);
</script>

</body>
</html>

That’s all for my this blog.It concludes my experiment with HTML5′s canvas. I hope this helps someone.Here are the list of browsers who fully support Canvas:- Chrome-4.0, IE-9.0, Firefox-2.0, Safari-3.1

Tag -

FOUND THIS USEFUL? SHARE IT

Leave a comment -