Display incrementing values

Question

I have succeeded in making an animation with multiple circular progress bars, but now there is a problem to display; each percent of that values incrementing in the middle of my circles. I don't know how to do this. If you have ideas which help me to do that. I would like to display all of these values.

Here is my code:

 class GreyCircle { constructor(x, y, radius) { this.posX = x; this.posY = y; this.radius = radius; } drawing1(context, startAngle, endAngle) { /*grey circle*/ context.beginPath(); context.arc(this.posX, this.posY, this.radius, startAngle, endAngle, false); context.strokeStyle = '#f3f3f3'; context.lineWidth = '20'; context.stroke(); } } class BlueCircle { constructor(x, y, r) { this.posX = x; this.posY = y; this.radius = r; } drawing2(context, percent) { let unitValue = (Math.PI - 0.5 * Math.PI) / 25; let startAngle = 0; let endAngle = startAngle + (percent * unitValue); let arcInterval = setInterval(() => { startAngle +=.1; percentText.textContent = startAngle + unitValue; /*blue circle*/ context.beginPath(); context.arc(this.posX, this.posY, this.radius, startAngle, startAngle + unitValue, false); context.strokeStyle = '#f39c12'; context.lineWidth = '20'; context.stroke(); context.lineCap = 'round'; if (startAngle >= endAngle) { clearInterval(arcInterval); } }, 50); } } function setup() { let canvas = document.getElementById("canvas"); let context = canvas.getContext("2d"); /*draw the grey circles*/ let greyCircle1 = new GreyCircle(150, 200, 100); greyCircle1.drawing1(context, 0, 2 * Math.PI); let greyCircle2 = new GreyCircle(400, 200, 100); greyCircle2.drawing1(context, 0, 2 * Math.PI); let greyCircle3 = new GreyCircle(650, 200, 100); greyCircle3.drawing1(context, 0, 2 * Math.PI); /*draw the blue circles*/ let blueCircle1 = new BlueCircle(150, 200, 100); blueCircle1.drawing2(context, 80); let blueCircle2 = new BlueCircle(400, 200, 100); blueCircle2.drawing2(context, 76) let blueCircle3 = new BlueCircle(650, 200, 100); blueCircle3.drawing2(context, 44); } window.onload = function() { setup(); }

 #canvas { position: relative; margin: auto; display: block; } #percentText { position: absolute; top: 50%; left: 50; }

 <section id="skills"> <div class="load-container"> <canvas id="canvas" width="800" height="800"></canvas> <span id="percentText">%</span> </div> </section>

Answer 1

Not exactly sure, what are you trying to accomplish, but if you want to print the text with fixed percentage, you could do something like this:

 class GreyCircle { constructor(x, y, radius) { this.posX = x; this.posY = y; this.radius = radius; } drawing1(context, startAngle, endAngle) { /*grey circle*/ context.beginPath(); context.arc(this.posX, this.posY, this.radius, startAngle, endAngle, false); context.strokeStyle = '#f3f3f3'; context.lineWidth = '20'; context.stroke(); } } class BlueCircle { constructor(x, y, r) { this.posX = x; this.posY = y; this.radius = r; } drawing2(context, percent) { let unitValue = (Math.PI - 0.5 * Math.PI) / 25; let startAngle = 0; let endAngle = startAngle + (percent * unitValue); var m = context.measureText(percent + "%"); context.save(); context.font = "20px Verdana" context.fillText(percent + "%", this.posX - this.radius + (this.radius - m.width), this.posY + 10); context.restore(); let arcInterval = setInterval(() => { startAngle +=.1; /*blue circle*/ context.beginPath(); context.arc(this.posX, this.posY, this.radius, startAngle, startAngle + unitValue, false); context.strokeStyle = 'blue'; context.lineWidth = '20'; context.stroke(); context.lineCap = 'round'; if (startAngle >= endAngle) { clearInterval(arcInterval); } }, 50); } } function setup() { let canvas = document.getElementById("canvas"); let context = canvas.getContext("2d"); let percentText = document.getElementById('percentText'); /*draw the grey circles*/ let greyCircle1 = new GreyCircle(150, 200, 100); greyCircle1.drawing1(context, 0, 2 * Math.PI); let greyCircle2 = new GreyCircle(400, 200, 100); greyCircle2.drawing1(context, 0, 2 * Math.PI); let greyCircle3 = new GreyCircle(650, 200, 100); greyCircle3.drawing1(context, 0, 2 * Math.PI); /*draw the blue circles*/ let blueCircle1 = new BlueCircle(150, 200, 100); blueCircle1.drawing2(context, 80); let blueCircle2 = new BlueCircle(400, 200, 100); blueCircle2.drawing2(context, 76) let blueCircle3 = new BlueCircle(650, 200, 100); blueCircle3.drawing2(context, 44); } window.onload = function () { setup(); }

 <canvas id="canvas" width="1920" height="1080">

But if you wanted the percentage to update with the loading, you would have to put the printing of the text inside the loop. Something like this:

 class GreyCircle { constructor(x, y, radius) { this.posX = x; this.posY = y; this.radius = radius; } drawing1(context, startAngle, endAngle) { /*grey circle*/ context.beginPath(); context.arc(this.posX, this.posY, this.radius, startAngle, endAngle, false); context.strokeStyle = '#f3f3f3'; context.lineWidth = '20'; context.stroke(); } } class BlueCircle { constructor(x, y, r) { this.posX = x; this.posY = y; this.radius = r; } drawing2(context, percent) { let unitValue = (Math.PI - 0.5 * Math.PI) / 25; let startAngle = 0; let endAngle = startAngle + (percent * unitValue); let arcInterval = setInterval(() => { startAngle +=.1; /*blue circle*/ context.beginPath(); context.arc(this.posX, this.posY, this.radius, startAngle, startAngle + unitValue, false); context.strokeStyle = 'blue'; context.lineWidth = '20'; context.stroke(); context.lineCap = 'round'; var percentNow = Math.round(percent * startAngle/endAngle) var m = context.measureText(percentNow + " %"); context.save(); context.clearRect(this.posX - this.radius + (this.radius - m.width), this.posY - 10, m.width * 3, 20) context.font = "20px Verdana" context.fillText(percentNow + " %", this.posX - this.radius + (this.radius - m.width), this.posY + 10); context.restore(); if (startAngle >= endAngle) { clearInterval(arcInterval); } }, 50); } } function setup() { let canvas = document.getElementById("canvas"); let context = canvas.getContext("2d"); let percentText = document.getElementById('percentText'); /*draw the grey circles*/ let greyCircle1 = new GreyCircle(150, 200, 100); greyCircle1.drawing1(context, 0, 2 * Math.PI); let greyCircle2 = new GreyCircle(400, 200, 100); greyCircle2.drawing1(context, 0, 2 * Math.PI); let greyCircle3 = new GreyCircle(650, 200, 100); greyCircle3.drawing1(context, 0, 2 * Math.PI); /*draw the blue circles*/ let blueCircle1 = new BlueCircle(150, 200, 100); blueCircle1.drawing2(context, 80); let blueCircle2 = new BlueCircle(400, 200, 100); blueCircle2.drawing2(context, 76) let blueCircle3 = new BlueCircle(650, 200, 100); blueCircle3.drawing2(context, 44); } window.onload = function () { setup(); }

 <canvas id="canvas" width="1920" height="1080">