Cannot Read Properties of undefined in a 2-Dimensional Matrix, HTML & Javascript

I’m working on creating a pixel-based light in the dark simulation with JavaScript to improve my coding skills. The goal is to create a bubble of light around the cursor as it moves. I’m only rendering a small portion around the cursor to ensure real-time results. I tried to create this code as scalable and friendly as possible, as even the light of the cursor and resolution of the pixels and be customized. Here is my code:

var Canvas = {

  Element: document.createElement("canvas"),
  Width: 500,
  Height: 500,
  Style: "border: 1px solid black;",
  Resolution: 10,
  Matrix: [],
  Context: null,

};

var Light = {

    Intensity: 20

}

document.body.appendChild(Canvas.Element);
Canvas.Element.style = Canvas.Style;
Canvas.Element.width = Canvas.Width;
Canvas.Element.height = Canvas.Height;

Canvas.Matrix = new Array(Canvas.Height / Canvas.Resolution).fill().map(() => new Array(Canvas.Width / Canvas.Resolution).fill({Intensity: 0}));
console.log(Canvas.Matrix);

Canvas.Context = Canvas.Element.getContext("2d");

    Canvas.Element.addEventListener('mousemove', function(event){

      var Rect = Canvas.Element.getBoundingClientRect();

      var Mouse = {

            X: event.clientX - Rect.left,
            Y: event.clientY - Rect.top,

      }

      Canvas.Context.fillRect(0, 0, Canvas.Width, Canvas.Height);
      Canvas.Context.clearRect(Mouse.X - (Light.Intensity / 2) * Canvas.Resolution, Mouse.Y - (Light.Intensity / 2) * Canvas.Resolution, Light.Intensity * Canvas.Resolution, Light.Intensity * Canvas.Resolution)

      for(var x = Mouse.X / Canvas.Resolution - (Light.Intensity / 2); x < Mouse.X / Canvas.Resolution + (Light.Intensity / 2); x++){

        for(var y = Mouse.Y / Canvas.Resolution - (Light.Intensity / 2); y < Mouse.Y / Canvas.Resolution + (Light.Intensity / 2); y++){

            if(x || y <= 0){

                CellDistance = Math.sqrt(Math.pow(Mouse.X - (Light.Intensity / 2), 2) + Math.pow(Mouse.X - (Light.Intensity / 2), 2));
                Canvas.Matrix[x][y].Intensity = CellDistance

            }
        
        }
        
      }

    });

<html>
</html>

As you can see, I receive the following error:

Uncaught TypeError: Cannot read properties of 
undefined

I’m sure I’ve lost brain cells looking through this code as I’m positive I’ve defined Canvas.Matrix. I’m fairly new to coding a this is probably a stupid mistake. Any help is helpful. Thank you!

You need to sign in to view this answers

Related Post