Canvas World to Screen stuttering

Question

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?

Answer 1

The issue I was having was that I was not using the beginPath() method when filling arcs. Seems that not reseting the previous draw builds up and causes performance loss over time.

canvasCtx.beginPath(); // addition
canvasCtx.arc(canvas.width/2, canvas.height/2, player.r, 0, 2*Math.PI);
canvasCtx.fill();