Adding objects into array

Question

Could someone tell me what's wrong with this code ? I am trying to fill canvas with squares as objects but as the loop is done and i am trying to draw that square on canvas nothing happens...

var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(35, 180, 218)";

var rectHeight = 5;
var rectWidth = 5;

var cells = [];

for (var i = 0; i <= canvas.width/rectWidth; i++) {
    for (var x = 0; x <= canvas.height/rectHeight; x++) {
        cells[i] = {
            posX : i*rectWidth,
            posY : x*rectHeight,
            draw : function() {
                ctx.fillRect(posX, posY, rectWidth, rectHeight);
            },
            clear : function() {
                ctx.clearRect(posX, posY, rectWidth, rectHeight);
            }
        };
    }
}

cells[2].draw;

You’re overwriting cells[i] canvas.height / rectHeight - 1 times. — Sebastian Simon
– Sebastian Simon, Commented Aug 9, 2018 at 15:21
draw is a function and should be called like cells[2].draw() — Simranjit Singh
– Simranjit Singh, Commented Aug 9, 2018 at 15:23
@Andreas Right. It should be this.posX and this.posY in the arguments. — Sebastian Simon
– Sebastian Simon, Commented Aug 9, 2018 at 15:26
You are rught @Andreas it should use this.position or calculate position before object creation. See the snippet below, it adds a rectangle( somehow ) but at the bottom right corner. It is not rendering 5x5 square though. — Simranjit Singh
– Simranjit Singh, Commented Aug 9, 2018 at 15:43

Simranjit Singh · Accepted Answer · 2018-08-09 15:52:38Z

1

var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";

var rectHeight = 15;
var rectWidth = 15;

var cells = [];

for (var i = 0; i <= canvas.width/rectWidth; i++) {
    for (var x = 0; x <= canvas.height/rectHeight; x++) {
        cells[i] = {
            posX : i*rectWidth,
            posY : x*rectHeight,
            draw : function() {
                ctx.fillRect(this.posX, this.posY, rectWidth, rectHeight);
            },
            clear : function() {
                ctx.clearRect(positionX, positionY, rectWidth, rectHeight);
            }
        };
    }
}
cells[2].draw();

<canvas id="c" width="500" height="400"></canvas>

edited Aug 9, 2018 at 15:52

answered Aug 9, 2018 at 15:40

Simranjit Singh

4042 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andreas Over a year ago

Global variables are almost always not the solution

Simranjit Singh Over a year ago

using this.position variables.

user10204122 · Accepted Answer · 2018-08-09 15:44:33Z

Thanks for the help @Xufox @SimranjitSingh and @Andreas..

Code now works like this:

var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(35, 180, 218)";

var rectHeight = 5;
var rectWidth = 5;

var cells = [];

for (var i = 0; i <= canvas.width/rectWidth; i++) {
    for (var x = 0; x <= canvas.height/rectHeight; x++) {
        cells[i*x] = {
            posX : i*rectWidth,
            posY : x*rectHeight,
            draw : function() {
                ctx.fillRect(this.posX, this.posY, rectWidth, rectHeight);
            },
            clear : function() {
                ctx.clearRect(this.posX, this.posY, rectWidth, rectHeight);
            }
        };
    }
}

cells[2].draw();

Collectives™ on Stack Overflow

Adding objects into array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related