sketch.js | Cross-Platform JavaScript Creative Coding Framework | Canvas library

I have some simple code that I've written in Python. It's working. Now I'm trying to port it to JavaScript. The code is here. I'm getting this error:

I am using this jQuery plugin to make free drawing over a canvas.
I want to clear the canvas for redrawing but after I do and when I click inside canvas for redrawing the old drawing that I cleared appears again

I'm trying to use Matter.Query.region to see if the character in my game is grounded. But, when I try to run region with a bounds object that I created (displayed with the dots shown in the game), it doesn't come up with any collisions even though it is clearly intersecting other bodies.

Code:

I've created a simple sketch using Instance Mode:

I'm currently making a 2D game in Javascript, but I want to the game to have different lighting levels, for example, if I were to create a day and night cycle. However, I want to be able to cut holes in the lighting/foreground, or do something so that I can make certain parts of the screen lit up, for example like a flashlight or candle. Note: I'm also using the P5.js library.

The most obvious idea that came to mind for going about in creating a foreground is just creating a rectangle with some opacity that covers the entire screen. This is good, but how am I supposed cut through this? Obviously, the code below won't work because I'm just layering on another element, and the rectangle is still obstructed and not perfectly clear.

I'm trying to make a voice recorder visualizer where the shapes would interact with little squares that are being passed from the left to the right of the screen to make it seem like it's recording a voice note. For some reason, I cannot get the squares to space exactly how I want them to, so I decided to push one square out at a time and when that square reaches a certain part on the screen, another square would start from the beginning so they can move at the speed and have the distance between each other I would like.

The problem is when I get the square to reach a certain part on the screen, the other square does not add at all, I tried adding a fill to change the color to see what happens but it just changes the color of the current square and that's it.

I got half-way through what I wanted in the representation of physics vector fields in 2D with p5js here. The other half is to get random particles to dynamically follow the forces of the vector field, and I am having a lot of problems with it. I have tried multiple things to take into account the wrap-around of the particles, as well as the fact that I am translating the origin of the plot to the center of the canvas. However, the particles seem minimally affected by the individual vectors in the field, and ultimately march along the x axis with slight bumpiness.

The fact that I am completely new at JS doesn't help splice all these elements from several presentations available online, and I would appreciate any advise as to what may be going wrong, and where I should focus on.

Here is what I have so far: a file sketch.js corresponding to my own answer quoted above:

I'm making a small animation in which the main square is rotating constantly. Now I wanted to add a trail to it so i searched online and watched a video by the Coding Train. Then I tried to rotate the particles, but when I try this everything just looks awful. I know that you can rotate things in p5 using the rotate() function, but first you have to use translate() and that can break everything.

I have used these functions, but as I mentioned before then everything just breaks. I want to ask You if there is any other way of rotating these particles at their center, which doesn't break everything.

Here is my code:

So what I am trying to do is make a clicker game, yet when I use the standard: