How to have multiple drawingcontext clip

p5.js Coding Questions
1

I’m trying to have multiple shapes on the canvas clip other shapes.

I tried two methods that don’t work:

First is to put the multiple shape masks on the canvas into a function. the result is only the last shape will act as clipping mask

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  circleGroup()
  drawingContext.clip()
  fill(150,0,0)
  rect(0,210,400,20)
  
}

function circleGroup(){
   fill(0,150,0)
   for (let i=0;i<5;i++){
    circle(60+60*i,200,80)
  }
}

Also tried drawing the masks in draw() directly. The first circle will clip everything else, including the other circles

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill(0,150,0)
   for (let i=0;i<5;i++){
    drawingContext.restore()
    circle(60+60*i,200,80)
    drawingContext.clip()
    fill(150,0,0)
    rect(0,210,400,20)
  }
  
  
}

The intended effect is to have 5 circles showing up, and the rectangle beyond the area that overlaps with circle shall be hidden.

How could I use multiple shapes as clipping masks? Thanks!

1 Like