无法在画布元素中绘制弧（圆）

Question

我面临的问题是，每当我在代码中显式设置canvas.width和canvas.height时，我都无法通过arc方法绘制弧线，但是当我不提及canvas.width和canvas.height时，能够绘制它，我的代码如下：-

import Paddle from '/src/paddle.js';
import InputHandler from '/src/input.js';


let canvas = document.getElementById("gamescreen");
let context = canvas.getContext("2d");

const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;

canvas.width = GAME_WIDTH;
canvas.height = GAME_HEIGHT;

let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT);
let lastTime = 0;
new InputHandler(paddle);

//just a demo to draw an arc (and it does not work)
context.beginPath();
context.arc(10, 10, 20, 0, Math.PI * 2);
context.stroke();
function gameloop(ts){
    let deltaTime = ts - lastTime;
    lastTime = ts;
    context.clearRect(0, 0, 800, 600);
    paddle.update(deltaTime);
    paddle.draw(context);
    // context.drawImage(ballImage, 10, 10, 16, 16);
    requestAnimationFrame(gameloop);
}
gameloop();