JS Canvas - Многоцветные границы дуг в процентах

Question

Я пытаюсь создать скрипт, который будет автоматически создавать круг на основе трех разных процентов.Это будет выглядеть примерно так:

У меня есть следующие значения: const percents = [0.26, 0.42, 0.32]

Вот мои функции для рисования сечения:

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();
}
function degreesToRadians (degrees) {
    return degrees * (Math.PI/180);
 }
function percentToRadians(percentage) {
    var degrees = percentage * 360;
    return degreesToRadians(degrees);
}

и затем я называю это три раза для каждого процента:

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

Но мой вывод выглядит так:

Answer 1

Вот вариант:

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>

На function circle я делаю рисование 3-х дуг, цвета для простоты жестко закодированы, вы можете изменить это, если хотите, иf1 и f2 - это доля круга, взятая первым и вторым цветом, это должно быть просто для интеграции в ваш проект.