Escape overlap in doughnut chart with rounded corners

Question

I've created a doughnut chart.

I've tried to make an arc with rounded corners, but couldn't succeed due to my poor maths. So I added circles on startAngle and endAngle of each arc. Added lineWidth to imitate spacing.

The problem is overlap - circles on the end of each angle overlap the next arc. How to escape overlap with this design remaining?

Here's the code:

"use strict";

const canvas = document.getElementById("myCanvas");
canvas.width = 400;
canvas.height = 400;

const ctx = canvas.getContext("2d");
const PI = Math.PI;
const TAU = PI * 2;

function drawSlice(
  ctx,
  x,
  y,
  radius,
  startAngle,
  endAngle,
  fillColor,
  strokeColor,
  cutout,
  lineWidth
) {
  ctx.fillStyle = fillColor;
  ctx.strokeStyle = strokeColor;

  ctx.save();
  ctx.translate(x, y);
  ctx.beginPath();
  ctx.arc(
    ((radius + (radius * cutout) / 100) / 2) * Math.cos(endAngle),
    ((radius + (radius * cutout) / 100) / 2) * Math.sin(endAngle),
    (radius - (radius * cutout) / 100) / 2 + lineWidth / 2,
    0,
    TAU
  );

  ctx.closePath();
  ctx.fill();
  ctx.lineWidth = lineWidth;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(
    ((radius + (radius * cutout) / 100) / 2) * Math.cos(startAngle),
    ((radius + (radius * cutout) / 100) / 2) * Math.sin(startAngle),
    (radius - (radius * cutout) / 100) / 2 + lineWidth / 2,
    TAU,
    0
  );
  ctx.fill();
  ctx.stroke();
  ctx.restore();

  ctx.save();
  ctx.beginPath();
  ctx.arc(x, y, radius, startAngle, endAngle);
  ctx.arc(x, y, (radius * cutout) / 100, endAngle, startAngle, true);
  ctx.closePath();
  ctx.fill();
  ctx.stroke(); // enables to see overlap
  ctx.restore();
}

class Doughnut {
  constructor(options) {
    this.options = options;
    this.canvas = options.canvas;
    this.ctx = ctx;
    this.x = this.canvas.width / 2;
    this.y = this.canvas.height / 2;
    this.colors = options.colors;
    this.totalValue = [...Object.values(this.options.data)].reduce(
      (a, b) => a + b,
      0
    );
    this.radius = Math.min(this.x, this.y) - options.padding;
  }

  draw() {
    let colorIndex = 0;
    let startAngle = -PI / 2;

    for (const i in this.options.data) {
      const value = this.options.data[i];
      const sliceAngle = (TAU * value) / this.totalValue;
      const endAngle = startAngle + sliceAngle - this.options.spacing / 100;

      drawSlice(
        this.ctx,
        this.x,
        this.y,
        this.radius,
        startAngle,
        endAngle,
        this.colors[colorIndex % this.colors.length],
        "#FFF",
        70,
        10
      );

      startAngle += sliceAngle;
      colorIndex++;
    }
  }
}

let CustomDoughnut = new Doughnut({
  canvas,
  padding: 20,
  spacing: 0,
  data: {
    TV: 5,
    Desktop: 5,
    Phone: 5,
    Laptop: 5,
  },
  colors: ["#80DEEE", "#FFE0E2", "#FFABE1", "#CE93DE"],
});

CustomDoughnut.draw();

<canvas id="myCanvas"></canvas>

Answer 1

How about something simpler like just drawing with the stroke...
See sample code below:

const canvas = document.getElementById("myCanvas");
canvas.width = 200;
canvas.height = 200;

const ctx = canvas.getContext("2d");
ctx.lineCap = "round"
const PI = Math.PI;
const TAU = PI * 2;

function drawSlice(x, y, radius, startAngle, endAngle, color, lineWidth) {
  ctx.beginPath();
  ctx.strokeStyle = color;
  ctx.lineWidth = lineWidth
  ctx.arc(x, y, 80, startAngle, endAngle);
  ctx.stroke();
}

class Doughnut {
  constructor(options) {
    this.options = options;
    this.x = canvas.width / 2;
    this.y = canvas.height / 2;
    this.colors = options.colors;
    this.totalValue = [...Object.values(this.options.data)].reduce( (a, b) => a + b, 0);
    this.radius = Math.min(this.x, this.y) - options.padding;
  }

  draw() {
    const DELTA = TAU - this.options.padding * Object.keys(this.options.data).length
    let colorIndex = 0;
    let startAngle = -PI / 2;

    for (const i in this.options.data) {
      const value = this.options.data[i];
      const sliceAngle = (DELTA * value) / this.totalValue;
      
      // draw the white padding
      drawSlice(this.x,this.y, this.radius, startAngle, startAngle+this.options.padding, "white",40);
      startAngle += this.options.padding;
      const endAngle = startAngle + sliceAngle - this.options.spacing / 100;
      // draw the actual color
      drawSlice(this.x,this.y, this.radius, startAngle, endAngle, this.colors[colorIndex % this.colors.length],40);

      startAngle += sliceAngle;
      colorIndex++;
    }
    // redraw the initial color to complete overlap
    drawSlice(this.x,this.y, this.radius, -PI / 2, -PI / 2+this.options.padding, "white",40);
    drawSlice(this.x, this.y, this.radius, -PI / 2+this.options.padding, -PI / 2+2*this.options.padding, this.colors[0], 40);
  }
}

let CustomDoughnut = new Doughnut({
  padding: 0.03,
  spacing: 0,
  data: {
    TV: 4000, Desktop: 1200, Phone: 212, Laptop: 40
  },
  colors: ["red", "blue", "cyan", "pink"],
});

CustomDoughnut.draw();

<canvas id="myCanvas"></canvas>

You can see that I've refactored your function drawSlice no more save, restore or translate, and we call the arc just once, I did left the radius hardcoded to 80 you can change that later.