javascript - Add a little padding to a centered rectangle on the Canvas with a sidebar

Question

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

Answer 1

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"
/>