# Create multiple custom rectangles in p5.js

**URL:** <https://discourse.processing.org/t/create-multiple-custom-rectangles-in-p5-js/23459>\
**Category:** Coding Questions\
**Created:** [August 24, 2020, 5:47am UTC](https://discourse.processing.org/t/create-multiple-custom-rectangles-in-p5-js/23459 "2020-08-24T05:47:14Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Axiang1225](https://avatars.discourse-cdn.com/v4/letter/a/ecccb3/32.png) [@Axiang1225](https://discourse.processing.org/u/Axiang1225)\
**Post date:** [August 24, 2020, 5:47am UTC](https://discourse.processing.org/t/create-multiple-custom-rectangles-in-p5-js/23459/1 "2020-08-24T05:47:14Z")

</div>

I’m beginning to explore p5.js web editor, and I was wondering if there is a way to create multiple custom rectangles with mouse in canvas.That’s the only way I can think of. I want it be like Illustrator’s rectangle tool.😭😭😭

 ![z3d42-rc8ok](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a407b324c8c57350379d14a4b41ec685a70fd3cd.gif)

```auto
let clickX, clickY;

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

function draw() {
  background(0);
  fill(255);
  stroke(255, 0, 0);
  rect(clickX, clickY, mouseX - clickX, mouseY - clickY);
}

function mouseMoved() {
  clickX = mouseX;
  clickY = mouseY;
}

```

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [August 24, 2020, 7:14am UTC](https://discourse.processing.org/t/create-multiple-custom-rectangles-in-p5-js/23459/2 "2020-08-24T07:14:43Z")

</div>

Hi, welcome to Forum !

First delete `background(0);` from your code, because it is every time clears screen. Second remove function `mouseMoved`. Do it with functions `mousePressed` and `mouseDragged`. It will solve your problem.