Responsive grid

I am making a small little testing thing I am trying to make it so when the mouse is over it turns a different color here is the code.

I am probably doing everything wrong so your feedback would be helpful.

you’re drawing way too much squares, and actually your issue comes from the following error :

for (var y = 0; y < height; y++)

So for a canvas of 100px height, your will execute the code inside your for loop 100 times. Then it means that you draw a lot of squares outside of the canvas (rect(x * scl, y * scl, scl , scl)
Moreover, it means that the x and y values are not the position of your squares, in your condition :

if (x < mouseX && x + scl > mouseX && y < mouseY && y + scl > mouseY)

So you should multiply x and y also by scl here.

Another way would be to increment your iterators (x and y) by the size of your squares :

for (let i = 0 ; i < width ; i += scl){}