Как я могу прямой разрезать многоугольник на несколько частей?

хочу разработать игру "Разрежь фигуру" на языке JavaScript. Будет несколько уровней с разными выпуклыми многоугольниками, которые будет нужно разрезать на определенные количество частей определенным количеством прямых линий. Линии и многоугольники отображаются на Canvas. Использую графическую библиотеку Paper.js. Дошел до момента разбиения многоугольника на другие многоугольники при помощи общих точек с линией:

var polygon = new Path.RegularPolygon(new Point(200, 300), 4, 100);
polygon.strokeColor = 'blue';
polygon.fullySelected = true;

var shapesArray = [];
shapesArray.push(polygon);

function splitShape(path1, path2){
var shapesArrayCopy = path1.slice(0);
shapesArray = [];
for(var i = 0; i < shapesArrayCopy.length; i++){
    var intersections = shapesArrayCopy[i].getIntersections(path2);
    if(intersections.length >= 2){
        var p1 = shapesArrayCopy[i].split(shapesArrayCopy[i].getNearestLocation(intersections[0].point));
        var p2 = shapesArrayCopy[i].split(shapesArrayCopy[i].getNearestLocation(intersections[1].point));
        p1.closed = true;
        p2.closed = true;
        shapesArray.push(Object.assign(p1));
        shapesArray.push(Object.assign(p2));
        path2.visible = false;
    }
    else{
        shapesArray.push(shapesArrayCopy[i])
    }
}

var myPath;

function onMouseDown(event) {
   myPath = new Path();
   myPath.strokeColor = 'black';
   myPath.add(event.point);
   myPath.add(event.point);
}

function onMouseDrag(event) {
   myPath.segments.pop(); 
   myPath.add(event.point);
}

function onMouseUp(event) {
   splitShape(shapesArray, myPath)
   myPath.visible = false;
}

Но дальше возник вопрос, который касается правильного отделения многоугольников от друг друга относительно проведенной линии, никак не могу придумать способ, как это сделать.

Вот пример на простых многоугольниках(линии могут абсолютно любые, пользователь сам их проводит):