# Callback context

**URL:** <https://discourse.processing.org/t/callback-context/37768>\
**Category:** Beginners\
**Created:** [June 30, 2022, 1:51pm UTC](https://discourse.processing.org/t/callback-context/37768 "2022-06-30T13:51:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![anne](https://avatars.discourse-cdn.com/v4/letter/a/ccd318/32.png) [@anne](https://discourse.processing.org/u/anne)\
**Post date:** [June 30, 2022, 1:51pm UTC](https://discourse.processing.org/t/callback-context/37768/1 "2022-06-30T13:51:53Z")

</div>

How does one pass on the context to a callback in p5?  
fx in this code, the x i undefined:

function setup() {  
createCanvas(400, 400);  
noLoop()  
}

function draw() {  
background(128);

let x = 100;  
loadImage(“birch.png”, imageLoaded)  
}

function imageLoaded(img){ //this function could be called whatever we want  
image(img,x,200,100,100);  
}

best  
anne

---

<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 30, 2022, 3:49pm UTC](https://discourse.processing.org/t/callback-context/37768/2 "2022-06-30T15:49:42Z")

</div>

Hello @anne,

would you open up a bit more and give an example in your question of what you actually want to do? Then we could maybe help you much better!

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Post date:** [June 30, 2022, 5:30pm UTC](https://discourse.processing.org/t/callback-context/37768/3 "2022-06-30T17:30:21Z")

</div>

Hi @anne

Try declaring x at the top of the program. I would use  
`var x;`  
because I’ve not caught up with the ‘let’ fashion. Where you have let x = 100; just have  
`x = 100;`  
Think that fixes what you asked, but as well as that, think your imageLoaded definition should not have a parameter “(img)” . Suggest you see the reference for [loadImage](https://p5js.org/reference/#/p5/loadImage). The syntax is different from yours.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 30, 2022, 5:36pm UTC](https://discourse.processing.org/t/callback-context/37768/4 "2022-06-30T17:36:15Z")

</div>

Use [**preload()**](https://p5js.org/reference/#/p5/preload) to load assets.

---

<div class="post-metadata">

**Author:** ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Post date:** [July 1, 2022, 7:43am UTC](https://discourse.processing.org/t/callback-context/37768/5 "2022-07-01T07:43:40Z")

</div>

I should have said, that having to use a global variable is messy, but in JavaScript I don’t know how else to do it.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [July 1, 2022, 10:11am UTC](https://discourse.processing.org/t/callback-context/37768/6 "2022-07-01T10:11:12Z")

</div>

You can avoid needing to create global variables by using instance mode.

Try the following:

```auto
new p5((p) => {
  let x = 100;
  let img;
  p.preload = () => {
    img = p.loadImage("birch.png");
  };
  p.setup = () => {
    p.createCanvas(400, 400);
  };

  p.draw = () => {
    p.image(img,x,200,100,100);
  };
});

```

See this reference material:

> **[reference | p5.js](https://p5js.org/reference/#/p5/p5)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![anne](https://avatars.discourse-cdn.com/v4/letter/a/ccd318/32.png) [@anne](https://discourse.processing.org/u/anne)\
**Post date:** [July 1, 2022, 10:34am UTC](https://discourse.processing.org/t/callback-context/37768/7 "2022-07-01T10:34:03Z")

</div>

Thank you for answering my question!