# Can shapes be limited by a border inside the canvas?

**URL:** <https://discourse.processing.org/t/can-shapes-be-limited-by-a-border-inside-the-canvas/35679>\
**Category:** Coding Questions\
**Created:** [March 11, 2022, 12:46pm UTC](https://discourse.processing.org/t/can-shapes-be-limited-by-a-border-inside-the-canvas/35679 "2022-03-11T12:46:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cottonchipper](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cottonchipper/32/10594_2.png) [@cottonchipper](https://discourse.processing.org/u/cottonchipper)\
**Post date:** [March 11, 2022, 12:46pm UTC](https://discourse.processing.org/t/can-shapes-be-limited-by-a-border-inside-the-canvas/35679/1 "2022-03-11T12:46:57Z")

</div>

The following sketch sets up my question [https://editor.p5js.org/cottonchipper/sketches/f7yKwh53v](https://editor.p5js.org/cottonchipper/sketches/f7yKwh53v)

```auto
background(220);
  fill('red');
  rect(0,0,200,200);
  rect(200,200,200,200);
  fill('white');
  const y = (400)/2 + sin(frameCount * 0.05) * 100;
  ellipse(100, 100, y, y);
  

```

It creates an ellipse that expands and contracts inside a rectangle drawn on the canvas.

My question is whether there is a way to make the edges of the ellipse flatten when they reach the edges of the rectangle, instead of overlapping onto the neighboring rectangle.

In this example, the rectangle and ellipse are in the corner of the canvas, but I would want to do the same in any area of the canvas. Essentially, I want to create a grid and move shapes within the cells, but not allow any part of a moving shape to be visible in a neighboring cell.

---

<div class="post-metadata">

**Author:** ![Shwaa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shwaa/32/9696_2.png) [@Shwaa](https://discourse.processing.org/u/Shwaa)\
**Post date:** [March 11, 2022, 5:32pm UTC](https://discourse.processing.org/t/can-shapes-be-limited-by-a-border-inside-the-canvas/35679/2 "2022-03-11T17:32:41Z")

</div>

A good function to look into is the [clip()](https://processing.org/reference/clip_.html) function, which limits which pixels on screen are updated by drawing functions like shape() or image(). If you set the clip bounds to the cell you want to draw in, you will only be able to draw in that cell. Clip bounds are affected by rectMode() when you set them.

---

<div class="post-metadata">

**Author:** ![cottonchipper](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cottonchipper/32/10594_2.png) [@cottonchipper](https://discourse.processing.org/u/cottonchipper)\
**Post date:** [March 13, 2022, 3:48pm UTC](https://discourse.processing.org/t/can-shapes-be-limited-by-a-border-inside-the-canvas/35679/3 "2022-03-13T15:48:53Z")

</div>

I’ve amended my sketch to use createGraphics() to achieve what I wanted.

```auto
let graf;
function setup() {
  createCanvas(400, 400);
  graf = createGraphics(200,200);
  
}

function draw() {
  background(220);
  fill('red');
  rect(0,0,200,200);
  rect(200,200,200,200);
  graf.background('red');
  graf.fill('white');
  const y = (300)/2 + sin(frameCount * 0.05) * 100;
  //graf.noStroke();
  graf.ellipse(100, 100, y, y);
  image(graf,200,200)
}

```