# JS Canvas - Multiple Color Arc Borders Based On Percentage

## 04 May 2019 - 1 answer

I'm trying to make a script that will automatically create a circle based on three different percentages. It will look something like this:

The values I have are: `const percents = [0.26, 0.42, 0.32]`

Here's my functions to draw a section:

``````const arc = (val, r, x, y, w, h, color, ctx, start) => {
x = 500;
y = 300;
ctx.strokeStyle = color;
ctx.lineWidth = 10;
ctx.beginPath();
let offset = 1.5 * Math.PI * start;
ctx.arc(x, y, r, offset, ((percentToRadians(val)) + offset));
ctx.stroke();
}
return degrees * (Math.PI/180);
}
var degrees = percentage * 360;
}
``````

and then I call it three times for each percentage:

``````arc(shot, r, x, y, w, h, "orange", ctx, 0); //0.26
//team
arc(team, r, x, y, w, h, "purple", ctx, shot); //0.42
//sport
arc(sport, r, x, y, w, h, "green", ctx, team); //0.32
``````

But my output looks like:

Here is an option:

``````var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function circle(x, y, r, f1, f2) {
ctx.lineWidth = 20;
ctx.strokeStyle = "orange";
ctx.beginPath();
start = 0
ctx.arc(x, y, r, start, Math.PI * f1 *2);
ctx.stroke();

ctx.strokeStyle = "purple";
ctx.beginPath();
start = Math.PI * f1 *2
ctx.arc(x, y, r, start, start + Math.PI * f2 *2);
ctx.stroke();

ctx.strokeStyle = "green";
ctx.beginPath();
start = start + Math.PI * f2 *2
ctx.arc(x, y, r, start, Math.PI * 2);
ctx.stroke();
}

circle(50, 50, 40, 1/4, 1/3)
circle(130, 120, 40, 1/8, 2/3)
circle(210, 50, 40, 1/3, 1/3)
circle(290, 120, 40, 1/9, 1/9)``````
``<canvas id="canvas" height=170 width=400></canvas>``

On the `function circle` I'm doing the drawing of the 3 arcs, the colors are hardcoded for simplicity you can change that if you want, and the f1 and f2 are the fraction of the circle taken by the first and second color, it should be simple to integrate into your project.