# Using p5 variables and functions outside setup and draw
**URL:** https://discourse.processing.org/t/using-p5-variables-and-functions-outside-setup-and-draw/44336
**Category:** Beginners
**Created:** [April 24, 2024, 12:14am UTC](https://discourse.processing.org/t/using-p5-variables-and-functions-outside-setup-and-draw/44336 "2024-04-24T00:14:14Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@slacle](https://discourse.processing.org/u/slacle)
#### Post date: [April 24, 2024, 12:14am UTC](https://discourse.processing.org/t/using-p5-variables-and-functions-outside-setup-and-draw/44336/1 "2024-04-24T00:14:14Z")
Just making sure…
p5 variables such as `width` and `height`, and p5 functions such as `rect()` and `fill()` can be used outside `setup()` and `draw()` as long as they’re in a function that is called from within either `setup()` or `draw()`
right?
For example:
```auto
function setup() {
createCanvas(600, 600);
background(30);
}
function draw() {
myRectangle();
}
function myRectangle() {
fill(150);
rect(width / 2, height / 2, 200, 200);
}
```
I mean I can see it works when I test it, and have done it all the time, but I’m wondering if there are any gotchas or situations in which it should be avoided or that we should be careful.
One thing I do know is that `createCanvas()` needs to be called first. But that’s true even when using the p5 variables and functions directly inside `setup()`.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [April 24, 2024, 12:51am UTC](https://discourse.processing.org/t/using-p5-variables-and-functions-outside-setup-and-draw/44336/2 "2024-04-24T00:51:52Z")
> [@slacle](#):
>
> One thing I do know is that `createCanvas()` needs to be called first.
Before **createCanvas()**, _width_ & _height_ are both `100`.
If a 100x100 canvas 2d is enough for your sketch, you don’t need to invoke **createCanvas()** at all!
> [@slacle](#):
>
> p5 variables such as `width` and `height`,
Actually, they’re not variables, but field properties from class p5.
When using p5js in [global mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode), those properties can also be accessed via _globalThis_ or _window_, like `globalThis.width` or `window.height`:
> **[globalThis - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis)**
>
> The globalThis global property contains the global this value, which is usually akin to the global object.
They’re also available via _p5.instance_, like `p5.instance.width` or `p5.instance.height`.
_p5.instance_ becomes available just before callbacks like **preload()** or **setup()** are executed.
We can prematurely make _p5.instance_ available by instantiating class p5 outside the functions like this: `new p5;`
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [April 24, 2024, 11:28am UTC](https://discourse.processing.org/t/using-p5-variables-and-functions-outside-setup-and-draw/44336/3 "2024-04-24T11:28:48Z")
Hello @slacle ,
You will find some useful resources and information here:
[https://p5js.org/](https://p5js.org/) \< Check out the learn section!
There is a lot there to peruse but worthy of exploration.
`:)`