Why is a new canvas element added to the DOM every time createGraphics is called?

p5.js Beginners
1

I have run into an unexpected issue with createGraphics().

Each time I define a new variable to hold a createGraphics object I am getting another canvas element added to the DOM. Here’s a minimalist example and a link to the GitHub repo:

const s = (p55) => {
  let canvasW = 400;
  let canvasH = 400;
  
  p55.setup = () => {
    p55.createCanvas(canvasW, canvasH);
  };

  let render = function () {
    let pg = p55.createGraphics(canvasW, canvasH);
    pg.background(29, 123, 199);
    pg.fill(255);
    pg.rect(p55.mouseX, p55.mouseY, 47, 47);
    return pg;
  };

  p55.draw = () => {
    p55.image(render(), 0, 0);
  };
};
let myp5 = new p5(s);
2

Hi @sspboyd,
Thats what createGraphics meant to be …

createGraphics reference
p5.Renderer reference

The issue you have is the way you using it …
Not really understand what you are trying to do here, but as given of your “example” it should look more like this !?

Cheers
—mnse

const s = (p55) => {
 let canvasW = 400;
 let canvasH = 400;
 let pg;
   
 p55.setup = () => {
   p55.createCanvas(canvasW, canvasH);
   pg = p55.createGraphics(canvasW, canvasH);
 };

 let render = function () {;
   pg.background(29, 123, 199);
   pg.fill(255);
   pg.rect(p55.mouseX, p55.mouseY, 47, 47);
   return pg;
 };

 p55.draw = () => {
   p55.image(render(), 0, 0);
 };
};

let myp5 = new p5(s);
3

Ok. Thank you for the links.

I read the createGraphics reference page before I posted my question here. I did not know to look at the Render reference too.

The createGraphics page says that it returns a p5.Graphics: offscreen graphics buffer. That does not indicate to me that a new canvas DOM element gets inserted.

Live and learn.

Thanks again