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

我面临的问题是，每当我在代码中明确设置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();

---

这段代码应该在浏览器中运行吗？它需要划桨硬件吗？Paile.js和input.js来自哪里？是的，这段代码应该在浏览器上运行。我有一个Paile.js文件和input.js，它们实现了Paile和InputHandler类。我得到了解决方案，因为每次出现新帧时，我都会重新压缩帧，所以如果我想在画布上绘制一些东西，我应该提到它在游戏循环中