I found the answer while framing the question so I’ll just post it.

I had to make a `pad`

variable & subtract it from rectangle width & add the half of it to `x`

position like:

```
const pad = 50
<Rect
width={browser.width - pad}
height={browser.height}
x={pad / 2}
y={(win.height - browser.height) / 2}
fill="papayawhip"
/>
```

I know how to center a rectangle on the Canvas. I have already seen How do I center a rectangle on a canvas but I also have a `250px`

sidebar.

I have the following code:

```
<Rect
width={browser.width}
height={browser.height}
x={(win.width - 250 - browser.width) / 2}
y={(win.height - browser.height) / 2}
fill="papayawhip"
/>
```

Where `win.width`

equals to `window.innerWidth`

, respectively `win.height`

equals to `window.innerHeight`

.

`browser.width`

equals to `win.width - 250`

where 250 is my sidebar width.

I did what the answer said `canvasWidth/2 - rectangleWidth/2`

. My `canvasWidth`

is `win.width - 250`

& `rectangleWidth`

is `browser.width`

.

How do I add a little padding to the `papayawhip`

rectangle?

Here’s a minimal Codesandbox → https://codesandbox.io/s/add-padding-to-centered-canvas-with-sidebar-gqhhl