CODEWITHSUNDEEP
javascriptarraysobjectcanvashtml5-canvas
o_s_a_k_a
o_s_a_k_a

Reputation: 71

How to set rectangles as objects to array in JS?

I am a beginer. I want to create a pixel art site. For this I try to develope my javascript code. Now I am on the way to simplify the code by setting the different rectangles using var as object and array to avoid to type milles of lines. Than I think to create at the second part an array constructor with defining coords(other x, other y) for every single rectangle in 2D array. At the moment I don't relise why the first part of the code is not working. Can you please suggest your mind? Thanks a lot in advance. Here is my code (link on JS Bin): 

var canvas;
var ctx;
var x = 0;
var y = 0;
var w = 10; // Width=10px
var h = w; // Heigth=10px

function init() {
canvas = document.querySelector('#myCanvas');
ctx = canvas.getContext('2d');
draw();
}

// Create a rect by path method for restoring the buffer
var rect;
function draw(){
  ctx.beginPath();
  ctx.rect(x,y,w,h);
}

var c = ['#66757F', '#F7F7F7', '#CCD6DD']; // Setting a color palette as an array
  for (var i=0; i<c.length; i++){
  c[i]=ctx.fillStyle();
  }

// Define colored rectangles as the Objects
var r1 = {rect;[0]} 
var r2 = {rect;[1]}
var r3 = {rect;[2]}
ctx.fill();

// Setting three rectangle by diagonal  
var r=[r1,r2,r3];// Array of setted rectangles
function draw(){
  for (var j=0; j<r.length; j++){
  r[j]=ctx.moveTo(x+w*j,y+h*j); 
  }
}

Upvotes: 1

Views: 2645

Answers (2)

Daniel Dees
Daniel Dees

Reputation: 304

Is what you're looking for how to create classes and make objects from that class?

If so this is how you would create a class and make objects.

//This will hold all of your objects.
var listOfObjects = [];

//This is a class. You can create objects with it.
function myClass() {

  //location
  this.X = 0;
  this.Y = 0;

  //size
  this.width = 5;
  this.height = 5;

}

function CreateNewObject() {

  //This will create and add an object of myClass to your array.
  //Now you can loop through the array and modify the values as you wish.
  listOfObjects.push(new myClass());

}

Upvotes: 1

Krandalf
Krandalf

Reputation: 48

 for (var j=0; j<r.length; i++){
 r[j]=ctx.moveTo(x+w*j,y+h*j); 
 }

You typed 'i++' when using the letter 'j'. Not sure whether this solves the problem.

Why do you use Math.abs in

var w = Math.abs(-10); // Width=10px

Isn't it easier to set 'var w' to 10 ?

var w = 10;

Upvotes: 1

Related Questions