# How to export p5 canvas in React

**URL:** <https://discourse.processing.org/t/how-to-export-p5-canvas-in-react/38991>\
**Category:** Libraries\
**Created:** [September 27, 2022, 1:35pm UTC](https://discourse.processing.org/t/how-to-export-p5-canvas-in-react/38991 "2022-09-27T13:35:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![amorin](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@amorin](https://discourse.processing.org/u/amorin)\
**Post date:** [September 27, 2022, 1:35pm UTC](https://discourse.processing.org/t/how-to-export-p5-canvas-in-react/38991/1 "2022-09-27T13:35:24Z")

</div>

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 ?

```auto
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)
  }

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 27, 2022, 1:51pm UTC](https://discourse.processing.org/t/how-to-export-p5-canvas-in-react/38991/2 "2022-09-27T13:51:42Z")

</div>

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?