### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [April 8, 2019, 4:17pm UTC](https://discourse.processing.org/t/access-properties-of-a-sketchs-container-in-instance-mode/10088/2 "2019-04-08T16:17:11Z")
Let’s say you’ve got some “style.css” file similar to this 1:
```auto
.sketchDiv {
width: 300px; height: 200px;
}
```
You can access the sketch’s main canvas via its hidden variable: _canvas_:
>
From there, you can access its most immediate parent container via: _parentElement_:
> **[Node.parentElement](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)**
>
> The Node.parentElement read-only property returns the DOM node's parent Element, or null if the node either has no parent, or its parent isn't a DOM Element.
So far, those are translated as: `const parentDiv = p.canvas.parentElement;`
Now we can access _parentDiv_’s dimensions via its _offsetWidth_ & _offsetHeight_ properties:
> **[HTMLElement.offsetWidth](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)**
>
> The HTMLElement.offsetWidth read-only property returns the layout width of an element as an integer.
> **[HTMLElement.offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)**
>
> The HTMLElement.offsetHeight read-only property returns the height of an element, including vertical padding and borders, as an integer.
Now you can call p5::**createCanvas()** using those 2 dimensions:
```javascript
p.setup = function () {
const parentDiv = p.canvas.parentElement;
p.createCanvas(parentDiv.offsetWidth, parentDiv.offsetHeight);
// ...
};
```
---
### Author:  [@surmvoise](https://discourse.processing.org/u/surmvoise)
#### Post date: [April 8, 2019, 4:44pm UTC](https://discourse.processing.org/t/access-properties-of-a-sketchs-container-in-instance-mode/10088/3 "2019-04-08T16:44:51Z")
Wow, thanks so much @GoToLoop! That worked for me. I would never have found that out by myself.
One question though, why do you use **const** and not **var** or **let**? I tried it with **var** and it worked just the same.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [April 8, 2019, 4:57pm UTC](https://discourse.processing.org/t/access-properties-of-a-sketchs-container-in-instance-mode/10088/4 "2019-04-08T16:57:17Z")
There are 5 keywords that can be used to declare a variable in JS: 🔑
1. `var`
2. `let`
3. `const`
4. `function`
5. `class`
Here’s the reference for `const` btW: 😇
- [Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const](http://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [April 10, 2019, 11:59pm UTC](https://discourse.processing.org/t/access-properties-of-a-sketchs-container-in-instance-mode/10088/5 "2019-04-10T23:59:31Z")
Here is a breakdown of `var` vs `let` vs `const` and their scopes:
[http://www.constletvar.com/](http://www.constletvar.com/)
Const also cannot be reassigned.
By contrast, in Processing(Java), you create pseudo-global scope with top-level variables in the sketch – and limit scope further by declaring variables inside functions, classes, methods, within loops etc. To create something that cannot be reassigned (like const), you may use `final`.
The habit of declaring variables as constant can be a form of defensive programming – it helps catch errors if you later accidentally attempt to change a value which you have declared should not change. In some languages constants may also sometimes also have memory management or performance benefits.