Canvas заполнение поля двухмерных массивом

Здравствуйте, нашел такой код, пытаюсь разобраться в нем, смысл в чем, создаётся некий квадрат (300 на 300 пикселей) и заполняется двухмерным массивом, не пойму как функция goLife() дробит этот квадрат, код здесь:

var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var mas =[];
canvas.onclick = function(event){
    var x = event.offsetX;
    var y = event.offsetY;
    console.log(x);
    console.log(y);
    x = Math.floor(x/10); //  300/10=30
    y = Math.floor(y/10);  
    mas[y][x]=1;
    console.log(mas);
}
function goLife(){
    var n=30, m=30;
    for (var i=0; i<m; i++){
        mas[i]=[];
        for (var j=0; j<n; j++){
            mas[i][j]=0;
        }
    }
}
goLife();

Я понимаю это так, первая функция - это при клике передаются координаты х и у в [i][j] и ставится значение единица. Сам квадрат делится на 30 кусков по горизонтали и вертикали. НО вот вторую функцию не понимаю, каким образом она делит наш квадрат на 30 кусков также, как она вообще относится к квадрату, т.е. каким вобще образом этот массив заносится в это поле квадрата, почему именно в квадрат а не во всю страницу, ведь он не определен к канвасу как первая функция, прошу объяснить.