Javascript 遇到画布宽度问题

好的。所以我有一个id为mainCanvas的画布，javascript和css在同一个html页面上。我想要它，这样我就可以在javascript中使画布具有一定的宽度（例如，红色矩形是画布的宽度和高度）。所以我在css中将画布宽度设置为60%，高度设置为500px（高度不是问题），我有代码

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

var width = canvas.width;
var height = canvas.height;

获取画布的宽度和高度。然后我有一个setInterval（）函数和一个调用和更新函数的游戏函数，还有一个render函数

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

function update() {

}

function render() {
    context.fillStyle = "red";
    context.fillRect(0, 0, width, height);
}

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

所以我有一个矩形，它的宽度变量作为宽度参数，高度变量作为高度参数

为了更容易看到，这里有一个片段

身体{
背景色：#22222；
}
帆布{
背景色：#1F；
宽度：60%；
高度：500px；
}
var canvas=document.getElementById（“mainCanvas”）；
var context=document.getContext（“2d”）；
var width=canvas.width；
var height=canvas.height；
函数游戏（）{
更新（）；
render（）；
}
函数更新（）{
}
函数render（）{
context.fillStyle=“红色”；
fillRect（0，0，宽度，高度）；
}
setInterval（函数（）{
游戏（）；
}, 1000/30);

更改行：

var context = document.getContext("2d");

致：

将其更改为：

var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d"); // `canvas` instead of `document`

var width = canvas.width;
var height = canvas.height;

var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d"); // `canvas` instead of `document`

var width = canvas.width;
var height = canvas.height;