Javascript 无法使用fillrect方法绘制矩形

我有以下代码从“/paile.js”导入paile

let canvas = document.getElementById("gamescreen");
let context = canvas.getContext("2d");
context.clearRect(0, 0, 800, 600);

const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;

let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT)
paddle.draw(context);

我的桨叶模块如下所示：

export default class Paddle{
    constructor(gamewidth, gameheight){
        this.width = 150;
        this.height = 30;
        this.position = {
            x: gamewidth/2 - this.width/2,
            y: gameheight - this.height - 10
        };
    }

    draw(ctx){
       ctx.fillStyle = "red";
       ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
    }
}

---

这里的问题是，当我调用palle.draw并将contenxt作为参数传递时，什么都不会发生。画布上没有绘制桨，请帮助我解决问题。

您需要在

画布

元素上设置

宽度
和
高度
属性。CSS
width
和
height
样式属性会更改元素维度，但不会更改上下文维度。相反，上下文被缩放以适应。设置元素的
宽度
和
高度
属性会更改上下文维度和元素维度（尽管CSS可以覆盖元素维度）

上下文尺寸通常默认为300x150。划桨正在这个区域外划动

解决此问题的一种方法是添加：

canvas.width=游戏宽度；
canvas.height=游戏高度；
您的
元素HTML是什么样子的？文件谢谢是的，我一直在玩代码，如果我给了x和y位置，桨就在画布上画出来了，但是如果我给了一个计算过的位置，我不知道为什么会这样，你清除了它，谢谢，顺便问一下，你是怎么知道的，我是说，你从哪里学到的我想知道这件事。我只是想知道，这样我就可以详细地参考它，如果有任何其他问题出现，那么文档可能会出现helpfull@4pa17cs011ARKAANSAYED对我来说，这是来自经验。MDN有，但我不确定这一特殊的怪癖是否在任何地方都有明确的记录。如果我可以告诉你，你到底是如何从经验中了解到它的，只是好奇地想知道，因为我想成为一名好员工developer@4pa17cs011ARKAANSAYED主要是因为你现在的处境。当时，我已经精通HTML和CSS，但是
canvas
是新发明的，所以我需要根据以前的经验和我在
canvas
中看到的结果做出一些有根据的猜测，并对其进行测试，得出您在这个答案中看到的结论。