PaperJS Clip 2 paths

by Samuel Price

HTML

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

JavaScript

window.onload = function () {

    function PointsToPath(points) {
        var path = new paper.Path()
        for (var i = 0; i < points.length; i += 1) {
            var p = points[i];
            path.add(new paper.Point(p[0], p[1]))
        }

        path.closed = true;
        return path
    }

    var canvas = document.getElementById("myCanvas");


    paper.setup(canvas);

    var base_points = [
        [50, 50],
        [100, 50],
        [125, 10]
    ];
    var clipPolygon = [
        [50, 50],
        [100, 50],
        [100, 0],
        [200, 0],
        [200, 300]
    ];

    var base = PointsToPath(base_points);
    base.strokeColor = "#000";

    var clip = PointsToPath(clipPolygon);
    clip.strokeColor = "#ff00";

    //	var base2 = new paper.CompoundPath([base])
    //    base2.subtract(clip)
    //var clipped = base.exclude(clip)
    //clipped.strokeColor = '#00ff00'
    //clipped.fillColor = '#ff00'
    paper.view.draw();

}