createCanvas(720, 720);

  background(220);

}

​

function draw() {

  background(220);

  let pathTri = new g.Path()

  push()

  const offset = 130

  pathTri.moveTo(offset+100, offset+0)

  pathTri.lineTo(offset+200, offset+173)

  pathTri.lineTo(offset+0, offset+173)

  pathTri.closePath()

  pathTri.fill = 'blue'

  pathTri.stroke = 'black';

  pathTri.strokeWidth = 3;

  pathTri.draw(drawingContext)

  pop()

  let pathRect = new g.Path()

  push()

  pathRect.addRect(360,360,180,180)

  pathRect.fill = 'red'

  pathRect.stroke = 'black';

  pathRect.strokeWidth = 3;

  pathRect.draw(drawingContext)

  pop()

  let pathCircle = new g.Path()

  push()

  pathCircle.addEllipse (cos(frameCount*.02)*100+360-150, sin(frameCount*.02)*100+360-160, 220, 220)

  pathCircle.fill = 'purple'

  pathCircle.stroke = 'black';

  pathCircle.strokeWidth = 3;

  pathCircle.draw(drawingContext)

  pop()

  let pathTriCircleCompound = new g.Path()

  push()

  pathTriCircleCompound = g.compound(pathTri, pathCircle, "intersection");

  pathTriCircleCompound.stroke = "black";

  pathTriCircleCompound.fill = "white";

  pathTriCircleCompound.strokeWidth = 3

  pathTriCircleCompound.draw(drawingContext);

  pop()

​

  let pathRectCircleCompound = new g.Path()

  push()

  pathRectCircleCompound = g.compound(pathRect, pathCircle, "intersection");

  pathRectCircleCompound.stroke = "black";

  pathRectCircleCompound.fill = "green";

  pathRectCircleCompound.strokeWidth = 3

  pathRectCircleCompound.draw(drawingContext);

  pop()

​

}