# Why the rectMode(CENTER) doesn't work for me?

**URL:** <https://discourse.processing.org/t/why-the-rectmode-center-doesnt-work-for-me/31009>\
**Category:** Coding Questions\
**Created:** [July 2, 2021, 5:42am UTC](https://discourse.processing.org/t/why-the-rectmode-center-doesnt-work-for-me/31009 "2021-07-02T05:42:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jexilo](https://avatars.discourse-cdn.com/v4/letter/j/2bfe46/32.png) [@jexilo](https://discourse.processing.org/u/jexilo)\
**Post date:** [July 2, 2021, 5:42am UTC](https://discourse.processing.org/t/why-the-rectmode-center-doesnt-work-for-me/31009/1 "2021-07-02T05:42:12Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

 ![Screen Shot 2021-07-02 at 1.37.49 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bab73ad880c50f6f0d447ba7fe8d84aa45670b35.png)  
I followed the tutorial and try to have my rectangle in the center but why it’s still not in the center?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [July 2, 2021, 5:54am UTC](https://discourse.processing.org/t/why-the-rectmode-center-doesnt-work-for-me/31009/2 "2021-07-02T05:54:24Z")

</div>

The center of the rectangle is at (300,100).

To put it in the center of the screen, you need to draw it at the position (200,200).

Try changing your rect() call to `rect(200,200,50,80);` and you’ll see how it’s position changes.

---

<div class="post-metadata">

**Author:** ![jexilo](https://avatars.discourse-cdn.com/v4/letter/j/2bfe46/32.png) [@jexilo](https://discourse.processing.org/u/jexilo)\
**Post date:** [July 2, 2021, 5:57am UTC](https://discourse.processing.org/t/why-the-rectmode-center-doesnt-work-for-me/31009/3 "2021-07-02T05:57:24Z")

</div>

but I want to use the rectMode attribute, so that I wouldn’t need to do the calculation. Do u have any ideas why my code rectMode(CENTER) didn’t work?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [July 2, 2021, 6:15am UTC](https://discourse.processing.org/t/why-the-rectmode-center-doesnt-work-for-me/31009/4 "2021-07-02T06:15:55Z")

</div>

It DID work. It just didn’t do what you think it should.

Normally rectangles are draw so their CORNER is at the position you specify.

The position you have specified is (300,100). Either the center of the rectangle will be there, or the corner of it will be. If you want it to be at some other position, you need to specify that position instead!

* * *

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

function draw() {
  background(220,100,30);

  rectMode(CORNER);
  fill(200,0,0);
  rect(300,100,50,80);

  rectMode(CENTER);
  fill(0,200,0);
  rect(300,100,50,80);
  
  fill(0,0,200);
  rect(200,200,50,80);

}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 2, 2021, 7:29am UTC](https://discourse.processing.org/t/why-the-rectmode-center-doesnt-work-for-me/31009/5 "2021-07-02T07:29:41Z")

</div>

Yeah, it’s about the Center of the rectangle itself not the screen

but for the screen just use  
width/2, height/2

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 2, 2021, 10:00am UTC](https://discourse.processing.org/t/why-the-rectmode-center-doesnt-work-for-me/31009/6 "2021-07-02T10:00:17Z")

</div>

Hello,

Processing resources (tutorials, references, examples, etc.) are available here:  
_[processing.org](http://processing.org)_

For starters:

- [Coordinate System and Shapes \ Processing.org](https://processing.org/tutorials/drawing/)
- [rectMode() \ Language (API) \ Processing 3+](https://processing.org/reference/rectMode_.html)
- [rect() \ Language (API) \ Processing 3+](https://processing.org/reference/rect_.html)

I changed your category to p5.js

You can look up the p5.js resources here:

- [https://p5js.org/](https://p5js.org/)

`:)`

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [July 2, 2021, 10:50am UTC](https://discourse.processing.org/t/why-the-rectmode-center-doesnt-work-for-me/31009/7 "2021-07-02T10:50:40Z")

</div>

Welcome to the Processing Forum, @jexilo!

> [@jexilo](#):
>
> … use the rectMode attribute, so that I wouldn’t need to do the calculation.

That’s an excellent principle for your coding in general, having p5.js do the calculation for you.

Following up on that principle, also consider this advice:

> [@Chrisir](#):
>
> but for the screen just use  
> width/2, height/2

Putting it all together, you can do this:

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

function draw() {
  background(220, 100, 30);
  rectMode(CENTER);
  rect(width / 2, height / 2, 50, 80);
}

```

Then, if you revise your code later on to change the canvas size, everything else will fall into place automatically. You will not need to change all the other numbers yourself. This would be especially handy if you were drawing multiple shapes. You could have your code use the canvas `width` and `height` to calculate positions and sizes of the shapes. If you change the canvas size, the shapes would be repositioned and rescaled accordingly.

_This was edited 2x on July 2, 2021 to refine the above paragraph, and then to add the following:_

Here’s another example:

```auto
function setup() {
  // try various canvas sizes ...
  createCanvas(200, 200);
  // createCanvas(100, 100);
  // createCanvas(600, 50);
  rectMode(CENTER);
  ellipseMode(CENTER); // the default
}

function draw() {
  background(220, 100, 30);
  // position and scale shapes based on canvas size 
  rect(width / 4, height / 4, width / 8, height / 4);
  rect(width * 3 / 4, height * 3 / 4, width / 8, height / 4);
  ellipse(width / 4, height * 3 / 4, width / 8, height / 4);
  ellipse(width * 3 / 4, height / 4, width / 8, height / 4);
}

```

![shapes1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0fd89bddb0672ef840a4f96c30080fe62be5e4cd.png)

![shapes2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/22b63d860af88c075c14cf69f95fd941b9587f0b.png)

![shapes3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a5b745edf1d712ccbe6d90a47ee0a03a237966f2.png)