Javascript fillRect 不从变量中绘制

Question

为什么 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
});

http://jsfiddle.net/xy4h4obw/1/

Answer 1

如果你让 Canvas 足够宽，这个效果就很好:

http://jsfiddle.net/stmdet8c/

或者将player.x设置为较小的值