Javascript-форум - Отрисовка сетки на canvas и событие по клику

Добрый день. Помогите разобраться с некоторыми моментами. Я пытаюсь отрисовать сетку на canvas (Допустим сетка 512px на 512px, где один квадрат 8px) Имеется код сетки:

<!DOCTYPE html>
<html>
    <head>
        <title>Отрисовка изображения</title>
        <meta charset="utf-8">
    </head>
    <body>
        <canvas id="canvas" width="520" height="520"></canvas>
        
        <script>
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            
            var cell_x_size = 513;
            var cell_y_size = 513;
            
            for (var x = 0.5; x <= cell_x_size; x += 8) {
                context.moveTo(x, 0);
                context.lineTo(x, cell_y_size);
            }
            
            for (var y = 0.5; y < cell_y_size; y += 8) {
                context.moveTo(0, y);
                context.lineTo(cell_x_size, y);
            }
            
            context.strokeStyle = "#000";
            context.stroke();
        </script>
    </body>
</html>

И массива:

var numCell = 4;
var mas = [];
for (var i = 0; i < numCell; i++){
	mas[i] = [];
	for (var j = 0; j < numCell; j++){
		mas[i][j] = 0;
}}

Разобрался пока только в отрисовке сетки линиями (Это вообще хорошо или плохо? Может подобная сетка именно на canvas реализуется по другому?). Возникают такие вопросы:
1) Как сделать чтобы эта сетка представляла собой массив данных (где пустая клетка = 0, а закрашенная = 1)
2) Как на эту сетку (с данными) повесить события по клику мышки. Где клик или кликнул и провел мышью закрашивали бы клетки.

Не суть что массив пока мал, потом или больше массив сделаю или меньше сетку. Главное понять как их вместе связать. Прикрепил миниатюру, что должно быть на выходе.