Why does my canvas spinwheel gets cut off on setting lineWidth?

This is my draw function for the canvas:

 const drawSector = (sector, i) => {
      const ang = arc * i;
      ctx.save();
      // COLOR
      ctx.lineWidth = 10;
      ctx.strokeStyle = "#ECBA3F";
      ctx.beginPath();
      ctx.fillStyle = sector.color;
      ctx.moveTo(rad, rad);
      ctx.arc(rad, rad, rad, ang, ang + arc);
      ctx.lineTo(rad, rad);
      ctx.fill();
      ctx.stroke();
      // TEXT

      ctx.translate(rad, rad);
      ctx.rotate(ang + arc / 2);
      ctx.textAlign = "right";
      ctx.fillStyle = "#000";
      ctx.font = "bold 10px sans-serif";
      ctx.fillText(sector.label, rad - 10, 10);
      //
      ctx.restore();
    };

Here’s my sandbox

As soon as I set a linewidth on the canvas, part of the edges get cutoff seemingly as if the canvas width and height don’t take the linewidth into account. How do I fix this?

Also is there a way I can rotate the text inside the arcs so that they stack rather than just being in a single line. Perhaps something like the below image?