HTML5 Canvas multi circle issue

Question

I have this code that is displaying one circle with a % value, and i'm trying to add another circle next to it who displays another % value.

To do so, i have tried to add another JS code who calls the second ID my_canvas2 but the results are one circle with an incremental % value with no ending.

 var ctx = document.getElementById('my_canvas1').getContext('2d'); var al = 0; var start = 4.72; var cw = ctx.canvas.width; var ch = ctx.canvas.height; var diff; function progressSim() { diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2); ctx.clearRect(0, 0, cw, ch); ctx.lineWidth = 7; ctx.fillStyle = '#09F'; ctx.strokeStyle = "#09F"; ctx.textAlign = 'center'; ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw); ctx.beginPath(); ctx.arc(80, 80, 70, start, diff / 10 + start, false); ctx.stroke(); if (al >= 65) { clearTimeout(sim); // Add scripting here that will run when progress completes } al++; } var sim = setInterval(progressSim, 25); 

 <canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"></canvas> <canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"></canvas> 

I've seen some similars subjects where the issue was the closing path of the first circle, i've tried so, still the same problem. Thanks for helping.

Answer 1

Try this.

 function progressSim(ctx, al, start) { let cw = ctx.canvas.width; let ch = ctx.canvas.height; let diff; diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2); ctx.clearRect(0, 0, cw, ch); ctx.lineWidth = 7; ctx.fillStyle = '#09F'; ctx.strokeStyle = "#09F"; ctx.textAlign = 'center'; ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw); ctx.beginPath(); ctx.arc(80, 80, 70, start, diff / 10 + start, false); ctx.stroke(); } function startProgress(canvas_id, progress_int_1, stop_at) { let ctx = document.getElementById(canvas_id).getContext('2d'); // let start = 4.72; let al = progress_int_1; let start = 4.72; var sim = setInterval(function(){ progressSim(ctx, al, start); al++; if (al >= stop_at) { clearTimeout(sim); } }, 25); } var progress_int_1 = 0; var progress_int_2 = 0; var sim1; var sim2; sim1 = startProgress('my_canvas1', progress_int_1, 50); sim2 = startProgress('my_canvas2', progress_int_2, 80); 

 <canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"></canvas> <canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"></canvas> 

Answer 2

You need to isolate your variables if you want to duplicate the functionality. This allows you to have code that is free from conflict.

This function takes in 2 parameters, the ID of your Canvas, and what percentage you want to show it to. diff and start are local variables that do not need to persist in between calls.

 function progressSim(id, percent) { var ctx = document.getElementById(id).getContext('2d'), cw = ctx.canvas.width, ch = ctx.canvas.height, al = 0, sim = setInterval(progress, 25); function progress() { var start = 4.72, diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2); ctx.clearRect(0, 0, cw, ch); ctx.lineWidth = 7; ctx.fillStyle = '#09F'; ctx.strokeStyle = "#09F"; ctx.textAlign = 'center'; ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw); ctx.beginPath(); ctx.arc(80, 80, 70, start, diff / 10 + start, false); ctx.stroke(); if (al >= percent) { clearTimeout(sim); // Add scripting here that will run when progress completes } al++; }; } progressSim('my_canvas1', 65); progressSim('my_canvas2', 80); 

 <canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"></canvas> <canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"></canvas> 

Answer 3

Very simple solution, I've just copied you code and done a find and replace on it so it can be used for my_canvas2

 var ctx = document.getElementById('my_canvas1').getContext('2d'); var al = 0; var start = 4.72; var cw = ctx.canvas.width; var ch = ctx.canvas.height; var diff; function progressSim() { diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2); ctx.clearRect(0, 0, cw, ch); ctx.lineWidth = 7; ctx.fillStyle = '#09F'; ctx.strokeStyle = "#09F"; ctx.textAlign = 'center'; ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw); ctx.beginPath(); ctx.arc(80, 80, 70, start, diff / 10 + start, false); ctx.stroke(); if (al >= 65) { clearTimeout(sim); // Add scripting here that will run when progress completes } al++; } var sim = setInterval(progressSim, 25); var ctx2 = document.getElementById('my_canvas2').getContext('2d'); var al2 = 0; var start2 = 4.72; var cw2 = ctx2.canvas.width; var ch2 = ctx2.canvas.height; var diff2; function progresssim2() { diff2 = ((al2 / 100) * Math.PI * 2 * 10).toFixed(2); ctx2.clearRect(0, 0, cw2, ch2); ctx2.lineWidth = 7; ctx2.fillStyle = '#09F'; ctx2.strokeStyle = "#09F"; ctx2.textal2ign = 'center'; ctx2.fillText(al2 + '%', cw2 * .5, ch2 * .5 + 2, cw2); ctx2.beginPath(); ctx2.arc(80, 80, 70, start2, diff2 / 10 + start2, false); ctx2.stroke(); if (al2 >= 45) { clearTimeout(sim2); // Add scripting here that will run when progress completes } al2++; } var sim2 = setInterval(progresssim2, 25); 

 <canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"></canvas> <canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"></canvas> 

Other on here may have a more eloquent solution