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

**URL:** https://discourse.processing.org/t/why-is-a-new-canvas-element-added-to-the-dom-every-time-creategraphics-is-called/37346
**Category:** Beginners
**Created:** [June 6, 2022, 4:34am UTC](https://discourse.processing.org/t/why-is-a-new-canvas-element-added-to-the-dom-every-time-creategraphics-is-called/37346 "2022-06-06T04:34:07Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![sspboyd](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sspboyd/32/1789_2.png) [@sspboyd](https://discourse.processing.org/u/sspboyd)
#### Post date: [June 6, 2022, 4:34am UTC](https://discourse.processing.org/t/why-is-a-new-canvas-element-added-to-the-dom-every-time-creategraphics-is-called/37346/1 "2022-06-06T04:34:07Z")

</div>

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:

> **[GitHub - sspboyd/p5js\_createGraphics\_canvas\_issue: Minimalist example of a...](https://github.com/sspboyd/p5js_createGraphics_canvas_issue)**
>
> Minimalist example of a P5.js createGraphics() issue - GitHub - sspboyd/p5js\_createGraphics\_canvas\_issue: Minimalist example of a P5.js createGraphics() issue

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

```

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [June 6, 2022, 5:37am UTC](https://discourse.processing.org/t/why-is-a-new-canvas-element-added-to-the-dom-every-time-creategraphics-is-called/37346/2 "2022-06-06T05:37:22Z")

</div>

Hi @sspboyd,  
Thats what createGraphics meant to be …

[createGraphics reference](https://p5js.org/reference/#/p5/createGraphics)  
[p5.Renderer reference](https://p5js.org/reference/#/p5.Renderer)

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

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

```

---

<div class="post-metadata">

### Author: ![sspboyd](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sspboyd/32/1789_2.png) [@sspboyd](https://discourse.processing.org/u/sspboyd)
#### Post date: [June 6, 2022, 3:43pm UTC](https://discourse.processing.org/t/why-is-a-new-canvas-element-added-to-the-dom-every-time-creategraphics-is-called/37346/3 "2022-06-06T15:43:16Z")

</div>

> [@mnse](#):
>
> Thats what createGraphics meant to be …
> 
> [createGraphics reference](https://p5js.org/reference/#/p5/createGraphics)  
> [p5.Renderer reference](https://p5js.org/reference/#/p5.Renderer)
> 
> The issue you have is the way you using it …

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