how to use windowResized() to to setup resizeCanvas

[hanhanxue]

Hello!

I'm trying to resize the p5 canvas when the user resizes the browser window. There is this function windowResized() in the doc but I'm not sure how to set it up in the p5-wrapper https://p5js.org/reference/#/p5/windowResized

What I have so far that's not working:

"use client"

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

function setup(p5 : P5CanvasInstance) {
  return () => {
    p5.createCanvas(p5.windowWidth, p5.windowHeight, p5.WEBGL);
  };
}

function draw(p5: P5CanvasInstance) {
  return () => {
    p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.plane(100);
    p5.pop();
  };
}

function windowResized(p5: P5CanvasInstance) {
    p5.resizeCanvas(p5.windowWidth, p5.windowHeight)
}

function sketch(p5: P5CanvasInstance) {
  p5.setup = setup(p5);
  p5.draw = draw(p5);
  p5.windowResized = windowResized(p5);
}

export default function Sketch() {
  return <ReactP5Wrapper sketch={sketch} />;
}

[jamesrweb]

Try wrapping the body of windowResized in an anonymous function like the others.

[hanhanxue]

Thank you!!

[jamesrweb]

You're welcome 😄!