I'm coding a game in the style of agar.io where I want to move the player to the direction relative to the mouse position.

This is how I check the mouse position, returning a Vector object;

let mouse_vector = new Vector(); canvas.onmousemove = function() { mouse_vector = mouse(event); } function mouse(evt) { mouse_vector = new Vector(evt.clientX - canvas.width/2, evt.clientY - canvas.height/2); return mouse_vector; }

The player is an object with an x and y coordinate to which I add the vector pointing towards the mouse. I have 1 canvas that represents the world and is hidden. The other canvas is my viewport, on which I draw the cropped world relative to the player position.

I'm using requestAnimationFrame here, but I tried using Interval as well.

function draw() { player.x += mouse_vector.x * 0.005; player.y += mouse_vector.y * 0.005; canvasCtx.clearRect(0, 0, canvas.width, canvas.height); canvasCtx.drawImage(game, player.x-canvas.width/2, player.y-canvas.height/2, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height); canvasCtx.arc(canvas.width/2, canvas.height/2, player.r, 0, 2*Math.PI); canvasCtx.fill(); requestAnimationFrame(draw); }

My issue is that the game starts stuttering over time. I would like it to be as smooth as at the start. I'm suspecting the issue is related to some kind of caching. I've noticed the game uses a lot of CPU power. Any ideas?