The HTML5 Canvas element is an HTML tag like <div>, <a>,
\nor <table> tag, with the exception that its contents are rendered with JavaScript.<\/p><\/blockquote>\n
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.<\/p>\n
After reading some basic but useful information let’s start with our Progress bar tutorial:<\/p>\n
Here’s what we get after creating it:-<\/p>\n
![\"progress_circle\"](\"\/blog\/wp-ttn-blog\/uploads\/2016\/01\/progress_circle.png\")
<\/p>\n
Our Coding is divided into three parts:-<\/p>\n
- \n
- Variable Declaration<\/li>\n
- Creating a simple circle on Page.<\/li>\n
- Creating progress circle on that circle.<\/li>\n<\/ul>\n
Here is the HTML snippet of Progress bar:-
\nCreate a canvas element in your page like this:-<\/p>\n[html]<\/p>\n
<canvas id="myCanvas" width="500" height="200"><\/canvas>
\n[\/html]<\/p>\nAnd after it let’s start with our Script tag:-<\/p>\n
First Part starts Here:-<\/p>\n
[html]<\/p>\n
var canvas = document.getElementById(‘myCanvas’); \/\/ to get the element
\nvar context = canvas.getContext(‘2d’); \/\/to return drawing context on canvas
\nvar al=0; \/\/ use it for Amount loaded
\nvar start=4.72; \/\/From where to start position of progress;
\nvar cw=context.canvas.width\/2; \/\/to get x cordinate;
\nvar ch=context.canvas.height\/2; \/\/ to get y coordinate;<\/p>\nhere width and height is divided by two so to get our progressbar in middle.<\/p>\n
var diff; \/\/to load progress bar Slowly<\/p>\n
[\/html]<\/p>\n
Second\u00a0Part starts Here:-<\/p>\n
Now comes our function which actually creating Progress Bar:-<\/p>\n
<\/p>\n
[html]<\/p>\n
function progressBar(){
\n \/\/calculated rate level to increase progress bar.<\/p>\ndiff=(al\/100)*Math.PI*2;<\/p>\n
\/\/ to clear the whole canvas rect
\n context.clearRect(0,0,400,200);<\/p>\n\/\/ simple create a basic circle<\/p>\n
Second Part coding starts here:-<\/p>\n
context.beginPath();<\/p>\n
\u00a0[\/html]<\/p>\n
\/\/formula of creating a circle in canvas like cw indicating x coordinate, ch indicating y coordinate,50 indicating radius,
\n0 indicating starting angle,2*Math.PI indicating end angle
\nFalse indicating anticlockwise direction.<\/p>\n<\/p>\n
[html]<\/p>\n
context.arc(cw,ch,50,0,2*Math.PI,false);<\/p>\n
context.fillStyle=’#FFF’; \/\/ for color of circle
\n context.fill(); \/\/ fill function
\n context.strokeStyle=’#e7f2ba’; \/\/ for border color
\n context.stroke(); \/\/ Stroke function<\/p>\n\u00a0[\/html]<\/p>\n
Up to this point, a\u00a0basic circle is created. Now, what we have to create is a progress bar circle.<\/p>\n
Third part coding starts here:-<\/p>\n
[html]<\/p>\n
context.fillStyle=’#000′; \/\/ For text color
\n context.strokeStyle=’#b3cf3c’; \/\/For Stroke Color
\n context.textAlign=’center’; \/\/you know already for aligning text in center;
\n context.lineWidth=15; \/\/ for Stroke width
\n context.font = ’10pt Verdana’; \/\/ for font specifying
\n context.beginPath(); \/\/ starting circle drawing function<\/p>\n\u00a0[\/html]<\/p>\n
\/\/formula of creating a circle in canvas like cw indicating x coordinate, ch indicating y coordinate,50 indicating radius, start
\nindicating starting angle, diff+start indicating end angle
\nFalse indicating anticlockwise direction.<\/p>\n<\/p>\n
<\/p>\n
[html]<\/p>\n
context.arc(cw,ch,50,start,diff+start,false);<\/p>\n
context.stroke();\/\/ Stroke function<\/p>\n
context.fillText(al+’%’,cw+2,ch+6); \/\/text value & text position<\/p>\n
This condition is used to give limit to progress bar
\n if(al>=56){
\n clearTimeout(bar);
\n }<\/p>\nal++; \/\/ increment the rate
\n }<\/p>\nvar bar=setInterval(progressBar,50); \/\/to call progress bar function after every 50 miliseconds.<\/p>\n
\u00a0[\/html]<\/p>\n
Code\u00a0part is completed here.<\/p>\n
Below I am giving you a\u00a0full version of the code,\u00a0copy and paste in your notepad and run the progress Bar on\u00a0the browser and do some experiments with it.<\/p>\n
[html]<\/p>\n
<!DOCTYPE html>
\n<html>
\n<head>
\n<meta charset="UTF-8">
\n<title>Canvas Tutorial<\/title>
\n<\/head>
\n<body><\/p>\n<canvas id="myCanvas" width="500" height="200"><\/canvas>
\n<script>
\nvar canvas = document.getElementById(‘myCanvas’);
\nvar context = canvas.getContext(‘2d’);
\nvar al=0;
\nvar start=4.72;
\nvar cw=context.canvas.width\/2;
\nvar ch=context.canvas.height\/2;
\nvar diff;<\/p>\nfunction progressBar(){
\ndiff=(al\/100)*Math.PI*2;
\ncontext.clearRect(0,0,400,200);
\ncontext.beginPath();
\ncontext.arc(cw,ch,50,0,2*Math.PI,false);
\ncontext.fillStyle=’#FFF’;
\ncontext.fill();
\ncontext.strokeStyle=’#e7f2ba’;
\ncontext.stroke();
\ncontext.fillStyle=’#000′;
\ncontext.strokeStyle=’#b3cf3c’;
\ncontext.textAlign=’center’;
\ncontext.lineWidth=15;
\ncontext.font = ’10pt Verdana’;
\ncontext.beginPath();
\ncontext.arc(cw,ch,50,start,diff+start,false);
\ncontext.stroke();
\ncontext.fillText(al+’%’,cw+2,ch+6);
\nif(al>=56){
\nclearTimeout(bar);
\n}<\/p>\nal++;
\n}<\/p>\nvar bar=setInterval(progressBar,50);
\n<\/script><\/p>\n<\/body>
\n<\/html><\/p>\n[\/html]<\/p>\n
That’s all for my this blog.It concludes my experiment with HTML5\u2032s 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<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":595,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":304},"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/31155"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=31155"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/31155\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=31155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=31155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=31155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}