How to add arc between points?

[dpyeates]

Hello community,

Given the following Skia defined path, I would like to change the line between points 4 to 5 and 6 to 7 into a smooth arc that follows the curve of the grey inner circle, instead of a straight line. What is the best way to do this?

Here is the code that is currently doing the drawing

  const infoBoxPath = useCallback(() => {
    const size = {
      w: width,
      h: 60 * scale,
      inset: 80 * scale,
      textHeight: 20 * scale,
      notch: 20 * scale
    };
    const pos = {
      x: origin.x - size.w / 2,
      y: origin.y + 135 * scale
    };
    const infoBox1 = Skia.Path.Make();
    infoBox1.moveTo(pos.x, pos.y); // point 1
    infoBox1.lineTo(pos.x + size.w, pos.y); // point 2
    infoBox1.lineTo(pos.x + size.w, pos.y - size.h); // point 3
    infoBox1.lineTo(pos.x + size.w - size.notch, pos.y - size.h); // point 4
    infoBox1.lineTo(pos.x + size.w - size.inset, pos.y - size.textHeight); // point 5
    infoBox1.lineTo(pos.x + size.inset, pos.y - size.textHeight); // point 6
    infoBox1.lineTo(pos.x + size.notch, pos.y - size.h); // point 7
    infoBox1.lineTo(pos.x, pos.y - size.h); // point 8
    infoBox1.close();
    return (
      <Group>
        <Path path={infoBox1} color={'black'} />
        <Path path={infoBox1} color={'white'} style="stroke" strokeWidth={1.5 * scale} />
      </Group>
    );
  }, [origin, scale]);