Spliting a quadratic slice into 3 smaller slices HTML5 CANVAS JS

Question

I have a quadratic curve that I use to create a slice of a piechart. The slice is situated in an axis of x and y, with the center point at (0,0). The radius is variable at radiusX and radiusY. This slice travels 90 degrees.

I need to split this slice into 3 seperate slices (each having 30 degree angle) and have them match whatever curve their parent slice had.

The following images show possible examples of the slice. Black circles adjust the size/shape of the slice:

Here is the function I've made but it's just not working correctly:

//globalPosX and globalPosY equal whatever position each of the two large black circles have repectively.
    var canvas = document.getElementById('CV_slices');
    var context = canvas.getContext('2d');
    var cenX = canvas.width/2;
    var cenY = canvas.height/2;
    var blackDotX = globalPosX - cenX;
    var blackDotY = cenY - globalPosY;
    var endX;
    var endY;
    var controlX;
    var controlY;
//set first slice
    var startCoOrds = {
        x: cenX  ,
        y: globalPosY  
    };                  

    for (i=1; i < 4; i++) {
//make end(x,y) of previous slice the start(x,y) for the next slice.
    endX = startCoOrds.x - (blackDotX*Math.sin(30));
    endY = startCoOrds.y + (blackDotY*Math.cos(30));
//set position of control point using position of start/end positions (at the moment only adjustibng using +10 -10 at end)
    controlX = ((endX - startCoOrds.x) /2) + (startCoOrds.x) + 10;
    controlY = ((endY - startCoOrds.y) / 2) + (startCoOrds.y) - 10;

// draw slice
    context.save();
    context.beginPath();
    context.moveTo(cenX, cenY);
    context.lineTo(startCoOrds.x, startCoOrds.y);
    context.quadraticCurveTo(controlX, controlY, endX, endY);
    context.lineTo(cenX, cenY);
//make end(x,y) of previous slice the start(x,y) for the next slice
    startCoOrds.x = endX;
    startCoOrds.y = endY;

    context.closePath();
    context.globalAlpha = 0.1;
    context.fillStyle = "#333333";
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = "#ffffff";
    context.stroke(); 
    context.restore();
    }

Answer 1

Use the closest "blackDot" as the radius of a circle, using the circle, divide your quadrant into 3 (see wiki) then scale the points by a ratio of the distance between 0,0 and the "blackDot"'s

In effect your arc is a quadrant of a circle that has been scaled in the x or y axis.