Why does it keep throwing a reading undefined variable error when they ARE defined?

Question

So..... I get an error:

"<a class='gotoLine' href='#101:18'>101:18</a> Uncaught TypeError: Cannot read properties of undefined (reading 'x')"

When I run this:

var Canvas = document.getElementById('ViewPort');
var Context = Canvas.getContext("2d");

Canvas.width = 250;
Canvas.height = 250;
Canvas.style.border = "1px solid black";

var Objects = [];

//Testing

Objects.push({

  x: 50,
  y: 50,
  width: 50,
  height: 50,
  style: "black",

})

Objects.push({

  x: 55,
  y: 55,
  width: 50,
  height: 50,
  style: "blue",

})

//End Testing

function RenderObjects() {

  for (var i = 0; i < Objects.length; i++) {

    for (var j = 0; j < Objects.length; j++) {

      if (Hitting(Object[i], Object[j])) {

        console.log("Hitting object " + j);
        console.log(Object[j])

      } else {

        Context.fillStyle = Objects[i].fillstyle;
        Context.fillRect(Objects[i].x, Objects[i].y, Objects[i].width, Objects[i].height);

      }

    }


  }

}

function Hitting(rectA, rectB) {

  return !(rectA.x + rectA.width < rectB.x ||
    rectB.x + rectB.width < rectA.x ||
    rectA.y + rectA.height < rectB.y ||
    rectB.y + rectB.height < rectA.y);

}

RenderObjects();

<canvas id = "ViewPort"></canvas>

What is the issue? I have read through my code and I can't find any issue. It should render two objects on an HTML canvas; provided that they don't collide.

Answer 1

You only should fix some typo.

var Canvas = document.getElementById('ViewPort');
var Context = Canvas.getContext("2d");

Canvas.width = 250;
Canvas.height = 250;
Canvas.style.border = "1px solid black";

var Objects = [];

//Testing

Objects.push({

  x: 50,
  y: 50,
  width: 50,
  height: 50,
  style: "black",

})

Objects.push({

  x: 55,
  y: 55,
  width: 50,
  height: 50,
  style: "blue",

})

//End Testing

function RenderObjects() {

  for (var i = 0; i < Objects.length; i++) {

    for (var j = 0; j < Objects.length; j++) {

      if (Hitting(Objects[i], Objects[j])) { //instead of Object[i], Object[j]

        console.log("Hitting object " + j);
        console.log(Objects[j]) //instead of Object[j]

      } else {

        Context.fillStyle = Objects[i].fillstyle;
        Context.fillRect(Objects[i].x, Objects[i].y, Objects[i].width, Objects[i].height);

      }

    }


  }

}

function Hitting(rectA, rectB) {

  return !(rectA.x + rectA.width < rectB.x ||
    rectB.x + rectB.width < rectA.x ||
    rectA.y + rectA.height < rectB.y ||
    rectB.y + rectB.height < rectA.y);

}

RenderObjects();

<canvas id = "ViewPort"></canvas>