HTML 5 Draw Arc Based On Given Time

Question

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> 

Answer 1

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>