How to export p5 canvas in React

[amorin]

Hi.
I’m using p5 with react typescript.
I need to use ‘canva_image’ value displayed in ‘saveFiles’ function in the Inpaint component to diplay it (for exemple).

How I can I do that ?

export function Inpaint(props: InpaintProps) {
  const myRef = useRef<any>();
  const [myP5, setMyp5] = useState<p5 | null>(null);
  useEffect(() => {
      setMyp5(new p5(Sketch(canvaDimension, props.imageSrc), myRef.current));
  }, []);

  return (
      <div ref={myRef}id="sketchDiv"></div>
  );
}

const Sketch = (canvaDimension: ImageMetadata, imageSrc: string) => (p5: any) => {
  var img: any;

  p5.setup = () => {
   ...
  };

  p5.draw = () => {
    ...
  };

  function saveFiles() {
    var c = p5.createCanvas(50, 50);
    p5.fill(0);
    const canva_image = p5.canvas.toDataURL('image/png');
   console.log(canva_image)
  }

[josephh]

Hi @amorin,

Welcome to the forum!

@amorin

I need to use ‘canva_image’ value displayed in ‘saveFiles’ function in the Inpaint component to diplay it (for exemple)

It’s a bit difficult to understand, do you want to capture a screenshot of the canvas and display it (view it) on the screen by using the Inpaint component?