# Canvas.elt.toDataURL saving blank images

**URL:** <https://discourse.processing.org/t/canvas-elt-todataurl-saving-blank-images/30371>\
**Category:** Coding Questions\
**Created:** [May 30, 2021, 4:17pm UTC](https://discourse.processing.org/t/canvas-elt-todataurl-saving-blank-images/30371 "2021-05-30T16:17:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![sameeh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sameeh/32/13431_2.png) [@sameeh](https://discourse.processing.org/u/sameeh)\
**Post date:** [May 30, 2021, 4:17pm UTC](https://discourse.processing.org/t/canvas-elt-todataurl-saving-blank-images/30371/1 "2021-05-30T16:17:32Z")

</div>

This is my nextjs (reactjs) code, I’m using the p5 library, everything is fine until I try to view the saved base64 image, the image is saved as blank. Any idea what I might be doing wrong? or is it a bug in the p5 reactjs library?

```auto

//import { useState } from 'react';

const Sketch = (W, H, saveDataURI) => (p) => {

  const BRUSH_START_SIZE = 10;

  const BRUSH_END_SIZE = 60;

  const BRUSH_DELTA = 1;

  let dataURI;

  let canvas;

  let count = BRUSH_START_SIZE;

  let bg;

  let button;

  let mouseWasPressed = false;

  function clearCanvas() {

    p.clear();

  }

  p.setup = () => {

    p.createCanvas(W, H);

    bg = p.loadImage("/foot_scan_clean_estiqama.png");

    canvas = p.select("canvas");

    saveDataURI(canvas.elt.toDataURL());

  };

  p.draw = () => {

    p.background(bg);

    if (p.mouseIsPressed) {

      if (count < BRUSH_END_SIZE) count = count + BRUSH_DELTA;

      else count = BRUSH_END_SIZE;

      let squareColor = p.color(255 - count, 0, 0);

      squareColor.setAlpha(20);

      p.fill(squareColor);

      p.noStroke();

      p.ellipse(p.mouseX, p.mouseY, count, count);

      mouseWasPressed = true;

      dataURI = canvas.elt.toDataURL("image/png");

    } else {

      if (mouseWasPressed) {

        p.updatePixels();

       // console.log(canvas);

        console.log(dataURI);

        saveDataURI(dataURI);

        mouseWasPressed = false;

      }

      count = BRUSH_START_SIZE;

    }

  };

  p.mouseDragged = () => {

    count = BRUSH_START_SIZE;

    // prevent default

    return false;

  };

};

export default Sketch;

```

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 31, 2021, 6:33pm UTC](https://discourse.processing.org/t/canvas-elt-todataurl-saving-blank-images/30371/2 "2021-05-31T18:33:59Z")

</div>

this simple code works for me

```javascript
let c;
function setup() {
  c = createCanvas(400, 400);
}

function draw() {
  background(220);
  console.log(c.elt.toDataURL("image/png"));

  noLoop();
}

```

maybe your `select` is pointing to another DOM?

Also please link to questions you opened in other forums

> <https://github.com/processing/p5.js/issues/5263>
>
> Hi
> 
> \- \[x\] Image
> \- \[x\] IO (Input/Output)
> 
> This is my nextjs (reactjs) code, …I'm using the p5 library, everything is fine until I try to view the saved base64 image, the image is saved as blank. Any idea what I might be doing wrong? or is it a bug in the p5 reactjs library? 
> 
> 
> \`\`\`
> const Sketch = (W, H, saveDataURI) =\> (p) =\> {
> const BRUSH\_START\_SIZE = 10;
> const BRUSH\_END\_SIZE = 60;
> const BRUSH\_DELTA = 1;
> let dataURI;
> let canvas;
> let count = BRUSH\_START\_SIZE;
> let bg;
> let button;
> let mouseWasPressed = false;
> 
> function clearCanvas() {
> p.clear();
> }
> 
> p.setup = () =\> {
> p.createCanvas(W, H);
> bg = p.loadImage("/foot\_scan\_clean\_estiqama.png");
> 
> canvas = p.select("canvas");
> 
> // button = p.createButton("clear");
> // button.position(W / 2 - button.width / 2, H - 50);
> // button.mousePressed(clearCanvas);
> saveDataURI(canvas.elt.toDataURL());
> };
> 
> p.draw = () =\> {
> p.background(bg);
> if (p.mouseIsPressed) {
> if (count \< BRUSH\_END\_SIZE) count = count + BRUSH\_DELTA;
> else count = BRUSH\_END\_SIZE;
> 
> let squareColor = p.color(255 - count, 0, 0);
> squareColor.setAlpha(20);
> 
> p.fill(squareColor);
> p.noStroke();
> p.ellipse(p.mouseX, p.mouseY, count, count);
> mouseWasPressed = true;
> } else {
> if (mouseWasPressed) {
> p.updatePixels();
> dataURI = canvas.elt.toDataURL("image/png");
> saveDataURI(dataURI);
> console.log(dataURI);
> mouseWasPressed = false;
> }
> count = BRUSH\_START\_SIZE;
> }
> };
> 
> p.mouseDragged = () =\> {
> count = BRUSH\_START\_SIZE;
> // prevent default
> return false;
> };
> };
> export default Sketch;
> \`\`\`