# Multiple Canvases preload()

**URL:** <https://discourse.processing.org/t/multiple-canvases-preload/17702>\
**Category:** Coding Questions\
**Created:** [February 10, 2020, 8:45pm UTC](https://discourse.processing.org/t/multiple-canvases-preload/17702 "2020-02-10T20:45:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dc527x](https://avatars.discourse-cdn.com/v4/letter/d/a587f6/32.png) [@dc527x](https://discourse.processing.org/u/dc527x)\
**Post date:** [February 10, 2020, 8:45pm UTC](https://discourse.processing.org/t/multiple-canvases-preload/17702/1 "2020-02-10T20:45:00Z")

</div>

If I have multiple sketches in my HTML page, what is the best way to ensure that they all load after the preload function? As of now I have three sketches. In sketch3 I have a preload function. The issue is I need to reference the canvas of sketch3 from sketch1, but since sketch1 has no preload function it is loaded before the preload of sketch3 is done, and I get undefined errors. Any help is appreciated.

---

<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:** [February 10, 2020, 9:07pm UTC](https://discourse.processing.org/t/multiple-canvases-preload/17702/2 "2020-02-10T21:07:52Z")

</div>

> [@dc527x](#):
>
> , and I get _undefined_ errors.

Can’t you just keep checking until it’s not _undefined_ anymore? 🤔

---

<div class="post-metadata">

**Author:** ![dc527x](https://avatars.discourse-cdn.com/v4/letter/d/a587f6/32.png) [@dc527x](https://discourse.processing.org/u/dc527x)\
**Post date:** [February 11, 2020, 1:46pm UTC](https://discourse.processing.org/t/multiple-canvases-preload/17702/3 "2020-02-11T13:46:52Z")

</div>

I was stuck on this for so long, I’m not sure how or why I missed it. Thanks so much!

---

<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:** [February 11, 2020, 3:02pm UTC](https://discourse.processing.org/t/multiple-canvases-preload/17702/4 "2020-02-11T15:02:47Z")

</div>

Alternatively you can instantiate _sketch1_ inside _sketch3_’s **setup()**.  
You can position a sketch inside a page via a `<div>` block w/ a unique _id_.  
This way, it doesn’t matter the order you instantiate each sketch.