title: Why does it keep throwing a reading undefined variable error when they ARE defined?
body: <p>So..... I get an error:</p>
  <pre><code>&quot;&lt;a class='gotoLine' href='#101:18'&gt;101:18&lt;/a&gt; Uncaught TypeError: Cannot read properties of undefined (reading 'x')&quot;
  </code></pre>
  <p>When I run this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; Objects.length; i++) {
  
      for (var j = 0; j &lt; 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 &lt; rectB.x ||
      rectB.x + rectB.width &lt; rectA.x ||
      rectA.y + rectA.height &lt; rectB.y ||
      rectB.y + rectB.height &lt; rectA.y);
  
  }
  
  RenderObjects();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id = "ViewPort"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>