未在画布上显示播放器（Javascript+；html+；css）

我有一个名为index.html的文件，我正在放一个html5游戏。到目前为止，我所做的只是创建了一个画布

<canvas id="mainCanvas"></canvas>

然后我在里面做了脚本标记，将画布连接到它，然后添加了上下文

var canvas = document.getElementById("mainCanvas");
var context = document.getElementById("2d");

现在我有了一个player变量

var player = {
        x: 10,
        y: 10,
        width: 30,
        height: 30
};

然后我有一个setInterval函数，它运行一个名为game的函数，该函数运行两个名为update和render的函数

    function game() {
        update();
        render();
    }

    function update() {

    }

    function render() {
        context.fillStyle = "white";
        context.fillRect(player.x, player.y, player.width, player.height);
    }

    setInterval(function() {
        game();
    }, 1000/30);

---

如你所见，我用播放器制作了一个矩形。为什么它没有出现？矩形没有出现在屏幕上。我做错了什么

打字错误：

---

为了调用画布上下文，您需要使用而不是

getElementById（）

打字：

为了调用画布上下文，需要使用而不是

getElementById（）

    function game() {
        update();
        render();
    }

    function update() {

    }

    function render() {
        context.fillStyle = "white";
        context.fillRect(player.x, player.y, player.width, player.height);
    }

    setInterval(function() {
        game();
    }, 1000/30);