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();
    
}