My problems of trying to make a game in javascript

[cold bay]

to the constructor:

class BlaBla {
       constructor( position, velocity = 0 ) {
              this.position  = {
                       x: position.x || 0, 
                       y: position.y || 0
              }
              this.velocity = velocity;
       }

EDITED after ChooKings comments

to the canvas.
you must set all this on the context of your canvas

so
const canvas = ....element
const ctx = canvas.getContext('2d')

and then
ctx.fillStyle....

[pulsar sluice]

The constructor code is missing an equal sign to assign this.position. Also, the declaration of this.velocity without an assignment doesn't make sense, especially since the constructor takes a parameter for it.

[cold bay]

yeah, thanks for correcting me... that was stupid.

[pulsar sluice]

I deleted my last comment because it would now be confusing to anyone who didn't see the previous version.

[cold bay]

so I palmface here 😉

[pulsar sluice]

I just noticed that your code still has a remaining problem. You destructured position, which is weird and would require instantiation like:

const b = new BlaBla({position:{x:5, y: 6}});

It would be much simpler without the destructuring or if you at least destructured out x and y.

[cold bay]

yeah I struggled with the position object and personally would just pass x and y I think

[pulsar sluice]

Your code would work if you just didn't destructure. Removing the braces fixes it.

[pulsar sluice]

If you want to destructure, my recommendation is this:

class BlaBla {
  constructor( {x,y}, velocity = 0 ) {
    this.position  = {
      x: x || 0, 
      y: y || 0
    }
    this.velocity = velocity;
}

[cold bay]

I'd tried to integrate the position the OP used and actually didn't know how to do that best.
I like the way you did it by not naming it. This way is simple to read and write

[pulsar sluice]

Is the animate() function ever called? Also, move line 17 to the end of the function.

[cold bay]

!!help.img

[slim zephyr]

⚠️ Please do not screenshot code as it causes a number of issues:

💠💠💠

1. Ease of assistance - If someone wants to copy your code and correct it, they cannot. Making it easy for people to help you is in your best interests.
2. Editorialising - It's common to try to make images small in size, which means you're likely to crop out code relevant to your issue.
3. Accessibility - Wide images can be hard to read on mobile devices, and are impossible for screen readers.
4. Legibility - You cannot read screenshots of code directly, instead you have to open them in an enlarged context.
5. Bandwidth usage/clutter - Some of our members use metered connections, and it is wasteful for them to download images of text.

For a small amount of code, please use a codeblock (!!help.codeblocks), while an external repository (see !!help.code) is suitable for larger codebases.

[cold bay]

...and taking an img from screen doesn't make it better 😉

[pulsar sluice]

I know what it does. I did not ask you to remove it. I asked you to relocate it. You have to do the drawing before you recursively call the animate() again.

It works, but it is not ideal. The call to requestAnimationFrame() should be at the last line of animate(). Where you have it can cause some renders to be skipped. It makes no difference right now because you have no motion. It will also not be obvious when you do have motion, because only a few frames will get skipped, but the slight degradation in performance is completely avoidable with a simple reordering of the code.