fillRect не рисует правильно в реакции

Question

Я пытаюсь построить четырехсторонний кирпичный забор для игры с использованием React.Но создается впечатление, что fillRect всегда создает одну нулевую координату или не рисует координаты, по крайней мере, с одним ненулевым значением.

import React from 'реагировать *

экспортировать класс по умолчанию SnakeGrid extendsReact.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" />
    );
}

}