CODEWITHSUNDEEP
javascripthtml5-canvas
Suffii
Suffii

Reputation: 5784

HTML 5 Draw Arc Based On Given Time

Can you please help me to figure out how to calculate following js script to display the reminding amount of total(instead of percentage)? For example if the total(given) is 90 and also current is 90 then the whole arc will be drawn and if the current amount is 45 the half of the arc must be drawn.

var can = document.getElementById('canvas1');

var ctx = can.getContext("2d");
var context = can.getContext('2d');

var given;
var current;

var percentage = .5; 
var degrees = percentage * 360;
var radians = degrees * (Math.PI / 180);

var x = 50;
var y = 50;
var r = 30;
var s = 1.5 * Math.PI;

ctx.beginPath();
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.stroke();



context.beginPath();
context.lineWidth = 10;

context.arc(x, y, r, s, radians+s, false);
context.stroke();
<canvas id="canvas1" width="100" height="100"></canvas>

Upvotes: 1

Views: 63

Answers (1)

bjedrzejewski
bjedrzejewski

Reputation: 2436

You just had to change the var percentage. Now it works, set your current and given as you please.

var can = document.getElementById('canvas1');

var ctx = can.getContext("2d");
var context = can.getContext('2d');

var given = SET YOUR GIVEN VALUE;
var current = SET YOUR CURRENT VALUE;

var percentage = current/given; 
var degrees = percentage * 360;
var radians = degrees * (Math.PI / 180);

var x = 50;
var y = 50;
var r = 30;
var s = 1.5 * Math.PI;

ctx.beginPath();
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.stroke();



context.beginPath();
context.lineWidth = 10;

context.arc(x, y, r, s, radians+s, false);
context.stroke();
<canvas id="canvas1" width="100" height="100"></canvas>

Upvotes: 1

Related Questions