# Issues with overwriting

**URL:** <https://discourse.processing.org/t/issues-with-overwriting/28650>\
**Category:** Coding Questions\
**Created:** [March 19, 2021, 4:45am UTC](https://discourse.processing.org/t/issues-with-overwriting/28650 "2021-03-19T04:45:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![quargsgreene](https://avatars.discourse-cdn.com/v4/letter/q/c2a13f/32.png) [@quargsgreene](https://discourse.processing.org/u/quargsgreene)\
**Post date:** [March 19, 2021, 4:45am UTC](https://discourse.processing.org/t/issues-with-overwriting/28650/1 "2021-03-19T04:45:33Z")

</div>

I am trying to have multiple same-size rectangular panels of differing colors appear on the canvas. However, each panel is appearing the same color. Each color is stored in an array declared globally and each element thereof is a hexadecimal string. I have tried multiple solutions, which include wrapping in an IIFE, as well as declaring a second variable within loops, with the same result. What should I do? Code pasted below.  
\<  
let panels=[];

function setup() {

let colors = [’#cca700’,’#1c7eff’,’#8400ff’,’#bfff00’,’#61ff8b’,’#e85d00’,’#02d902’,  
‘#e3c500’,’#fff700’,’#ffd900’];

createCanvas(windowWidth,windowHeight);  
loadImage(‘bg2.jpg’, img=\>{  
imageMode(CENTER);  
image(img, width/2,height/2,900,400);  
});  
background(0);

```
for(let i=0;i<width;i+=width/10){   
  for(let j=0;j<colors.length;j++){
      (function(){
      panels.push(new Panel(i,colors[j]));  
    })(j);
    
  }
}

```

}

function draw() {

for(let i=0;i\<panels.length;i++){

```
panels[i].display();  

```

}

}

class Panel {  
constructor(x,col){  
this.x=x;  
this.col=col;  
}

display(){  
fill(this.col);  
rect(this.x,0,width/10,height);

}  
}  
/\>

Thanks.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 19, 2021, 4:57am UTC](https://discourse.processing.org/t/issues-with-overwriting/28650/2 "2021-03-19T04:57:35Z")

</div>

You’ve divided your window into 10 sections, but in each section you are adding rectangles of every color! But when you draw all your rectangles, only the last one drawn appears (because it is drawn over all the other rectangles in that section).

The real problem is that you have 2 for loops, when you really only need one. There should only be one rectangle per section, and it should be one color.

You loop should look more like this:

```auto
for( let i=0; i<10; i+=1){
  panels.push( new Panel( i * width / 10.0 , colors[i] ) );  
}

```

untested code, YMMV

---

<div class="post-metadata">

**Author:** ![quargsgreene](https://avatars.discourse-cdn.com/v4/letter/q/c2a13f/32.png) [@quargsgreene](https://discourse.processing.org/u/quargsgreene)\
**Post date:** [March 19, 2021, 9:08pm UTC](https://discourse.processing.org/t/issues-with-overwriting/28650/3 "2021-03-19T21:08:58Z")

</div>

Thanks. This ended up working.