# Failing to "resizeCanvas" in instance mode within a for loop

**URL:** https://discourse.processing.org/t/failing-to-resizecanvas-in-instance-mode-within-a-for-loop/34119
**Category:** p5.js
**Created:** [December 14, 2021, 7:12pm UTC](https://discourse.processing.org/t/failing-to-resizecanvas-in-instance-mode-within-a-for-loop/34119 "2021-12-14T19:12:03Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Sofie](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@Sofie](https://discourse.processing.org/u/Sofie)
#### Post date: [December 14, 2021, 7:12pm UTC](https://discourse.processing.org/t/failing-to-resizecanvas-in-instance-mode-within-a-for-loop/34119/1 "2021-12-14T19:12:04Z")

</div>

i try to create a sketch with p5s dom lib. I managed to create all my p5 Canvas Elements (grey tones)in a for loop and linking them to the matching divs(brown). When i try to resize the window, all sketches just disappear.

 ![2021-12-14 20_11_12-Unbenannt-1 bei 100% (Ebene 1, RGB_8#) _](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6d9243a418bcc71b36004a552af640c6cf2b2257.png)

My File, on line 103 is the mentioned resize function [ResizeIssue](https://editor.p5js.org/sofie-hilt/sketches/934d0v-JU)

My guess is that i need to implement a seperate “for loop”. I’m new to coding and every step takes me ages. Right now i’m stuck and i don’t know how to implement the function. Help and feedback greatly appreciated.

thank you so much  
sofie

---

<div class="post-metadata">

### Author: ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [December 14, 2021, 8:04pm UTC](https://discourse.processing.org/t/failing-to-resizecanvas-in-instance-mode-within-a-for-loop/34119/2 "2021-12-14T20:04:07Z")

</div>

1. Calling `resizeCanvas` clears the canvas, so you need to re-fill the canvas with the background color.
2. When you are resizing the canvases you need to check the actual `offsetWidth` and `offsetHeight` of the respective.
3. As written, `canvasDiv` is function scoped, so even if you fix #2 and use `canvasDiv.offset...`, each instance mode sketch is going to be resized to match the size of the last div created. This is a wonderful example of the absolute evil of the `var` keyword. If you declare `canvasDiv` with the `let` keyword then it will be block scoped inside the for loop so that for each instance the `canvasDiv` variable will reference the appropriate div.

To better illustrate point #3 here is a simplified example:

https://openprocessing.org/sketch/1397991/embed/?plusEmbedHash=ODRmNTM3YThmODBjZDk1ZjlhNmRjNjdiMzE3NzEwNzFkY2UyMzc1MzlmMDBlM2M0MjNlYmZlNzhjNmQ5ZWFkODhjNGRjMThhMzA1OWI1MmU0Y2RkNTUwM2JkZTU0MDZiZTk2MTk5MDkyMjQyZjIxNDc5ZmMyYjI5ZjdiNGEzMzVCRUFKNjdBbE0rV25PaG1FNnhvOGc2Mnl5N09QdlhGNFJNVG90OXFGeTg0UnFIZ3hBODhENVVFTzhtQ2ozNWcrQlRKTERUcEE1cGUvTUwrZThMa1ErUT09