shoopik,
... для примера
отмеченный квадрат можно стереть повторным кликом.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#c1 {
width: 300px;
height: 300px;
border: 3px solid black;
margin: 40px;
}
</style>
</head>
<body>
<canvas id="c1" width="300" height="300"></canvas>
<script>
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)*10;
y = Math.floor(y/10)*10;
(mas[y]= mas[y]||{}) && mas[y][x]==1 ? (delete mas[y][x],!Object.keys(mas[y]).length && delete mas[y],ctx.clearRect(x,y,10,10)) : (mas[y][x]=1,ctx.fillRect(x,y,10,10));
console.log(mas);
}
</script>
</body>
</html>