Camera movement with static player in the middle of screen when around move like agar.oi.

Question

Im trying to code a functionality similar to that of agar.oi, where there is a field for example 3000x3000 and it renders only that 25x25 area of the player's position. I’ll show my code and my render function. I’ve searched and i saw something like translate method from canvas, but idk how I can code it, I’m stuck in this functionality.

Game:

https://sololearn.com/compiler-playground/cVE5TZxNTlOm/?ref=app

Render:

https://sololearn.com/compiler-playground/cme9b5gcleuK/?ref=app

Answer 1

Mirielle i think you would like to add this code regarding camera function that you shared i guess 2years back.
I seen its uses pretty much same thing you said
https://code.sololearn.com/WKAs4PtCXN75/?ref=app

Also O Jaum the most easy way to do it is that use something like this then you will be good to go.
ctx.translate(player.x - innerWidth/2,player.y - innerHeight/2);
pretty easy right:)

Answer 2

Thx all of you for help. Mirielle, ill try your idea but same way i accept your help when not busy 😅