# How to have multiple drawingcontext clip

**URL:** <https://discourse.processing.org/t/how-to-have-multiple-drawingcontext-clip/34696>\
**Category:** Coding Questions\
**Created:** [January 17, 2022, 9:41pm UTC](https://discourse.processing.org/t/how-to-have-multiple-drawingcontext-clip/34696 "2022-01-17T21:41:54Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [January 17, 2022, 9:41pm UTC](https://discourse.processing.org/t/how-to-have-multiple-drawingcontext-clip/34696/1 "2022-01-17T21:41:54Z")

</div>

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

```auto
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

```auto
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!