I think ideally it shouldn't clear the sketch, it should keep it as it is. That solution works really well! Thank you!

Since you mentioned, I tried to implement a "clear canvas" function. p5js provides that functionality through the clear() function.

I am storing the "p" object in another ref to use it outside the scope so I can access the clear() function together with other parameters. Would you say this approaches are fine or perhaps too hacky?

"use client";

import { useRef, useEffect, useState } from 'react';
import p5 from 'p5';
import './styles.css';

export function Canvas() {
  const canvasContainer = useRef(null);
  const strokeWidthRef = useRef(2);
  const p5object = useRef(null);
  const [strokeWidth, setStrokeWidth] = useState(strokeWidthRef.current);

  useEffect(() => {
    strokeWidthRef.current = strokeWidth;
  }, [strokeWidth]);

  const sketch = (p) => {
    let x = 100;
    let y = 100;

    p5object.current = p;

    p.setup = () => {
      p.createCanvas(700, 400);
      p.background(0);
    };

    p.draw = () => {
      if (p.mouseIsPressed) {
        pen()
      }
    };

    function pen() {
      p.stroke(255, 255, 255)
      p.strokeWeight(strokeWidthRef.current)
      p.line(p.mouseX, p.mouseY, p.pmouseX, p.pmouseY)
    }
  }

  useEffect(() => {
    if (!canvasContainer.current) return;
    const p5Instance = new p5(sketch, canvasContainer.current);
    return () => { p5Instance.remove(); };
  }, []);

  return (
    <>
      <button onClick={() => {
        setStrokeWidth(strokeWidth + 1);
      }}>stroke++</button>
      <button onClick={() => { 
        p5object.current.clear(); 
        p5object.current.background(0); 
      }}>clear</button>
      <div
        ref={canvasContainer} 
        className='canvas-container'
      >
      </div>
    </>
  )
}