# How to get atributes from sketch it's parent element

**URL:** <https://discourse.processing.org/t/how-to-get-atributes-from-sketch-its-parent-element/11452>\
**Category:** Coding Questions\
**Created:** [May 21, 2019, 6:58am UTC](https://discourse.processing.org/t/how-to-get-atributes-from-sketch-its-parent-element/11452 "2019-05-21T06:58:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![TimR](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@TimR](https://discourse.processing.org/u/TimR)\
**Post date:** [May 21, 2019, 6:58am UTC](https://discourse.processing.org/t/how-to-get-atributes-from-sketch-its-parent-element/11452/1 "2019-05-21T06:58:19Z")

</div>

I’ve made a P5 sketch in instance mode. Now, I wanted to get to know some of the settings from it’s parent element. Like dimensions.

For this I thought a good starting point would be to be able to know who is it’s parent. Doing a `console.log( sketch );` I found out it has the id in the sketch object. `sketch.canvas.parentElement.id`.

This is my abstracted sketch. As you can see I actually create two sketches.

```auto
var p5Back = function( sketch ) {

	console.log( sketch );

	let parentDivId = sketch.canvas.parentElement.id;
	
	console.log( parentDivId );
}

let sketch_01 = new p5( p5Back, ‘sketch_01’ );
let sketch_02 = new p5( p5Back, ‘sketch_02’ );

```

But this last `console.log` prints `TypeError: sketch.canvas is undefined`

Anyone knows what I’m doing wrong? 🙂

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [May 21, 2019, 7:16am UTC](https://discourse.processing.org/t/how-to-get-atributes-from-sketch-its-parent-element/11452/2 "2019-05-21T07:16:53Z")

</div>

The canvas is created at the beginning of setup so it’s undefined when you line of code runs. You’ll have to run it after the after `createCanvas()` happens in setup. There’s an implicit `createCanvas(100, 100)` at the beginning of setup if you don’t put one in.

Try something like:

```auto
const p5Back = function(sketch) {
  sketch.setup = function() {
    let parentDivId = sketch.canvas.parentElement.id;
    console.log(parentDivId); // prints "" which is the id of the body element
  }
}

```

Check out the [`parent()` documentation](https://p5js.org/reference/#/p5.Element/parent) for a more streamlined approach to getting and setting a parent.

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [May 21, 2019, 7:22am UTC](https://discourse.processing.org/t/how-to-get-atributes-from-sketch-its-parent-element/11452/3 "2019-05-21T07:22:56Z")

</div>

Also I don’t know if you saw the section in [the wiki about parent elements](https://github.com/processing/p5.js/wiki/Global-and-instance-mode#specifying-parent-html-element) but it might be helpful.

---

<div class="post-metadata">

**Author:** ![TimR](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@TimR](https://discourse.processing.org/u/TimR)\
**Post date:** [May 21, 2019, 7:34am UTC](https://discourse.processing.org/t/how-to-get-atributes-from-sketch-its-parent-element/11452/4 "2019-05-21T07:34:27Z")

</div>

Yes!, that’s it. Placing it inside setup did the trick.  
Ah yes, I’ll take a look at the documentation. It was the wiki page where I found out about the instance mode in the first place.

Thank you very much!