fillRect在反应中无法正确绘制

Question

我正在尝试使用React为游戏构建四面砖围墙。但是，似乎fillRect总是使一个坐标为零或没有以至少一个非零值绘制坐标。

从“反应”导入React

导出默认类SnakeGrid扩展了React.Component {

componentDidMount() {
    this.updateCanvas();
}

updateCanvas() {
        const ctx = this.refs.canvas.getContext('2d');
            // BLANK FENCE 1

    var fence = []
    for(var i = 0;i< 48;i++){
        // fence.push({x:i*20,y:0},{x:i*20,y:620});
        fence.push({x:i*20,y:0});
        fence.push({x:i*20,y:620});
    }
    for( i = 1;i< 31;i++){
        //  fence.push({y:i*20,x:0},{y:i*20,x:940});
    }
    for ( i =0;i<fence.length;i++){
        console.log(fence.length,fence[i].x,fence[i].y)
        ctx.fillRect(fence[i].x,fence[i].y,19,19);  //problem here 
         //only printing for y=0 and not for y=620
         //similarly for x=0 and not for x=940
    }


}

render(){
    return (
        <canvas ref="canvas" />
    );
}

}