# P5.js onCanvasCreated?

**URL:** <https://discourse.processing.org/t/p5-js-oncanvascreated/28316>\
**Category:** Coding Questions\
**Created:** [March 7, 2021, 4:25pm UTC](https://discourse.processing.org/t/p5-js-oncanvascreated/28316 "2021-03-07T16:25:52Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![yy23432](https://avatars.discourse-cdn.com/v4/letter/y/bbce88/32.png) [@yy23432](https://discourse.processing.org/u/yy23432)\
**Post date:** [March 7, 2021, 4:25pm UTC](https://discourse.processing.org/t/p5-js-oncanvascreated/28316/1 "2021-03-07T16:25:52Z")

</div>

Hi,

I’m trying to use p5.js as a GUI part. Trying to do like…

```auto
function createP5GUI() {
	let f = function(p) {
		p.setup = function() {
			let c = p.createCanvas(500, 50);
		}
	}
	return new p5(f);
}

```

and use it in DOM like below  
but doesn’t work because canvas needs some time to be created.

```auto
let gui = createP5GUI();
console.log(gui.canvas) // undefined
document.body.appendChild(gui.canvas) // error

```

And it’s easy workaround is to wait some time.

```auto
let gui = createP5GUI();
setTimeout(function() {
  document.body.appendChild(gui.canvas);
}, 200);

```

Apparently it’s not good way…I think it should be like

```auto
let gui = createP5GUI();
gui.onCanvasCreated = function(e) {
  document.body.appendChild(e.canvas);
}

```

Does anyone know how to detect if the canvas created?

Cheers…

---

<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:** [March 7, 2021, 5:59pm UTC](https://discourse.processing.org/t/p5-js-oncanvascreated/28316/2 "2021-03-07T17:59:26Z")

</div>

Hi! I’m sure I’ve encountered this problem before. I think there is no callback so you need to pass that function and execute it in setup…

But if what you want is to set the parent node, you can set it directly in the constructor

> **[processing/p5.js - 
Specifying Parent HTML Element](https://github.com/processing/p5.js/wiki/Global-and-instance-mode#specifying-parent-html-element)**
>
> Global-and-instance-mode