# \[SOLVED\] Ordering items on canvas

**URL:** <https://discourse.processing.org/t/solved-ordering-items-on-canvas/12421>\
**Category:** Coding Questions\
**Created:** [July 1, 2019, 12:17pm UTC](https://discourse.processing.org/t/solved-ordering-items-on-canvas/12421 "2019-07-01T12:17:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 1, 2019, 12:17pm UTC](https://discourse.processing.org/t/solved-ordering-items-on-canvas/12421/1 "2019-07-01T12:17:58Z")

</div>

Hi,

I’m having trouble ordering drawn items on canvas,

 ![15%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2f54197a103c1c10af6b4242ccd97c1a12355d48.jpeg)

I’m looking to draw the path and the info table on top of the fill, however this is causing some issues.

This is the function which draws, the items on canvas,

```auto
function cell_functions(){

for (var i = 0; i < grid.length; i++) {
  grid[i].drawpath();
  grid[i].hover();
  grid[i].check_node_info();
  grid[i].info();
  if(switches.toggle===1){
      grid[i].draw(sides);
  }
  if(game.toggle===1){
      grid[i].fill();
  }
}
};

```

here is the full sketch;

[https://editor.p5js.org/paulgoux/sketches/v\_BYCNviE](https://editor.p5js.org/paulgoux/sketches/v_BYCNviE)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 4, 2019, 3:24am UTC](https://discourse.processing.org/t/solved-ordering-items-on-canvas/12421/2 "2019-07-04T03:24:01Z")

</div>

Were you able to resolve this issue?

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 4, 2019, 9:49am UTC](https://discourse.processing.org/t/solved-ordering-items-on-canvas/12421/3 "2019-07-04T09:49:01Z")

</div>

Thanks for checking in. Only partly, my info box still appear behind the paths and walls no matter where I place my info box code.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 4, 2019, 12:29pm UTC](https://discourse.processing.org/t/solved-ordering-items-on-canvas/12421/4 "2019-07-04T12:29:57Z")

</div>

What is grid[I] in that loop? A hexagon? Does each one have an info box?

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 4, 2019, 2:13pm UTC](https://discourse.processing.org/t/solved-ordering-items-on-canvas/12421/5 "2019-07-04T14:13:10Z")

</div>

yup each grid contains a Cell, and each cell has cell info, neighbours, children, parent, cluster etc. The paths currently draw on top, of the map, which is what i wanted but the paths still draw over the info box, though its not to big an issue, as the map is draggable.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 4, 2019, 3:20pm UTC](https://discourse.processing.org/t/solved-ordering-items-on-canvas/12421/6 "2019-07-04T15:20:51Z")

</div>

You can’t do that in one loop. You need to loop through all the non-overlapping things in the lower layer first. Then loop through the cells again and display info. Imagine these were pieces of cardboard or paper, and picture doing what you are doing physically with one loop – you will quickly see why that won’t work. All pieces first, then info.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 4, 2019, 7:24pm UTC](https://discourse.processing.org/t/solved-ordering-items-on-canvas/12421/7 "2019-07-04T19:24:30Z")

</div>

Thanks for your help I shall give it a try.