<p id='show'></p>
<canvas id='mcvs' width='300' height='300' style='border:1px solid'></canvas>
<script>
var row=10,col=10,wh=30
mymap=[]
for(let a=0;a<row*col;a++){mymap[a]=0}
mymap[8]=1
var ctx=mcvs.getContext('2d')
mcvs.onclick=function(e){
var x=e.layerX,y=e.layerY
x=(x-x%30)/30,y=(y-y%30)/30
var mn=x+y*row
mymap[mn]=1
disupdate()
}

function disupdate(){
for(let a=0;a<mymap.length;a++){
let x=a%row,y=(a-x)/row
ctx.strokeRect(x*wh,y*wh,wh,wh)
if(mymap[a]==1){
ctx.fillRect(x*wh,y*wh,wh,wh)
}}
}disupdate()
</script>