ReactP5Wrapper has additional pixels in height

[Ariaspect]

Expected Behavior

App.tsx

import { ReactP5Wrapper } from "@p5-wrapper/react";
...

function App() {
  return (
    <>
      <div onContextMenu={(e) => e.preventDefault()}>
        <ReactP5Wrapper sketch={sketch} />
      </div>
    </>
  );
}

sketch.tsx

import { Sketch } from "@p5-wrapper/react";

const sketch: Sketch = (p5) => {
  p5.setup = () => p5.createCanvas(500, 500);
  p5.draw = () => {
    if (p5.mouseIsPressed) {
      p5.fill(0);
      p5.stroke(255);
    } else {
      p5.fill(255);
      p5.stroke(0);
    }
    p5.ellipse(p5.mouseX, p5.mouseY, 50, 50);
  };
};
export default sketch;

App.css

#root {
  margin: auto;
  text-align: center;
}

.react-p5-wrapper {
  border: 2px solid black;
}

From my 500x500 canvas (+2px border), I thought ReactP5Wrapper component would result in same size.

Actual Behavior

Instead, it has additional 6 pixels in height which is weird.
The canvas element is 500x500.

Specifications

"vite": "^4.4.5"
"typescript": "^5.0.2",
"@p5-wrapper/react": "^4.2.0",

[jamesrweb]

I can't reproduce this locally. The only thing I can think of is that the viewport is somehow not maintaining the aspect ratio for some reason.

Can you show me the css-box-model for the canvas, canvas wrapper div and your own div?

[jamesrweb]

Closing due to inactivity.

[mnvr]

I also ran into the same issue.

• I started with a p5.createCanvas 300x300 px, and the div that contained the Sketch was also set to height 300px.
• However, the ReactP5Wrapper component ended up with a height of 304px.
• I tried looking around in the CSS, but I couldn't spot anything that might be causing it either in my own code, nor in react-p5. That said, I might not have looked at the right places.
• I'm on macOS 14.0. I'm using Gatsby with styled components. I was testing on Chrome, but I also saw the same behaviour on Safari when I checked.

I also found a workaround - setting display: flex on the container of ReactP5Wrapper made the extra pixels go away (You can see an example here - https://github.com/mnvr/mrmr.io/blob/main/pages/ai-religion/components.tsx#L59-L64).

---

Anyways, I'm not actually sure if this is a library issue or something else that's wrong, but I just thought I'll mention that I also faced this, and also mention the display: flex a hack to workaround the issue.

ps. Thanks for the great library, it's a pleasure to use this!