我的javascript画布代码有什么问题？

我写了这个js画布代码。它能工作，但它能画出半幅画布的棱角。我可以做些什么来纠正这段代码，或者我需要完全重写它。将此代码放入setup（）中是否正确。非常感谢。

var侧=10；
var grassArr=[]；
var矩阵=[]；
控制台日志（矩阵）
函数设置（）{
对于（var y=0；y，在矩阵构造上有一个小错误。这里，为您更正它


var侧=10；
var grassArr=[]；
var矩阵=[]；
函数设置（）{
对于（var y=0；yNo）问题。很高兴我能帮上忙。
var side = 10;
var grassArr = [];
var matrix = [];



console.log(matrix)


function setup() {
    for(var y = 0; y<49; y++){
    matrix[y] = [];
    for(var x = 0; x<49; x++){
let arr = [0,1,2]
let r = random(arr)
matrix[x][y] = r
matrix.push(r)    
}
}


frameRate(5)
 createCanvas(49 * side, 49* side);
  background('#acacac');
}


function draw(){
        for (var y = 0; y < 49; y++) {
for (var x = 0; x < 49; x++) {
        if(matrix[y][x]== 0){
                fill('#acacac')
                rect(x * side, y * side, side, side);
            }
                if(matrix[y][x]== 1){
                fill('green')
                rect(x * side, y * side, side, side);
            }
            if(matrix[y][x]== 2){
                fill('yellow');
                  rect(x * side, y * side, side, side);

            }
        } 
     }
}