Javascript fillRect不从变量中提取

为什么context.fillRect（10,10,20,20）会填充一个矩形，但是当使用诸如player.x或player.y之类的变量时，它就不起作用了

如果我在JavaScript控制台中询问player.x的值，它将返回300。但是当在fillRect中使用player.x时，JavaScript会显示空白

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
var player = {}
player.x = 300
player.y = 80

window.addEventListener("load", function(){
    context.fillRect(10, 10, 20, 20) //works as intended
    context.fillRect(player.x, player.y, 20, 20) //does not work
});

---

如果画布足够宽，则此操作非常有效：

---

或者将

player.x

设置为较小的值

这并不是因为您使用的是变量。问题是x，y坐标不在画布上。如果将player.x=10和player.y=10设置为有效。如果你使用context.fillRect（300，80，20，20），你会得到一个白色的画布。我怎么会忽略这个呢？谢谢你的帮助！