Referencing sub object arrays while using canvas

[titanium69]

Firstly, some are gonna ask for a code dump, but I gotta tell ya, theres a lot of it and it has little to do with my question. I’m trying to draw on a canvas and each Class has its own draw method and all objects are created from a Class. Let me give you a rundown of my object structure…

In my Cell class (which is used to create the cells in each row) I have a draw method…how do I reference the x,y values of the cell.

The board.draw(context) method calls the draw method for each row like this

//draw the rows this.rows.forEach((i) => i.draw(context));

And in my row.draw(context) method i have

draw(context) { this.cells.forEach((i) => i.draw(context)); }

And in my cell.draw(context) method I have

console.log(this.x,this.y); drawCircle(context,this.x, this.y, this.rad,"white"); //drawCircle is a global function that works fine

In my current Cell draw method I use this.x and this.y, but thats not working as console.log returns 0,0 for x,y, but the object structure shows cell[i].x and cell[i].y have proper values.

I’m not referencing x,y properly. A little guidance here would be appreciated.

All the context calls before the cell.draw method work fine. I’m sure it’s my x,y referencing I’m not geting right.

[staledata]

Please replace the Codebytes by code blocks (code wrapped in 3 backticks each). That makes it more readable and concise.

Unless you bind this to another object, this refers to the class. So if you do not bind this to another element (what I haven’t seen here) this.x and this.rows would have to be defined in the classes constructor. But these values are not what you need, but the nested values inside the rows (rows[index].cells) and the values inside the cells (cells[index].x).

The context could be defined in the constructor, so why pass that as an argument rather than the current row or cell which you could then use instead of this to access the current parent’s elements?