Make grid half clickable

Question

I am making a crossword puzzle in HTML5. For that I have created a grid on canvas using rectangles in Javascript. I want only the blue rectangles to be clickable and rest of the rectangles not clickable. The for loops are for filling particular rectangles as blue. Here is the code:

var canvas;
var context;
var i=0;
var j=0;
var size=40;
var x;
var y;

function display()
{
    alert("a");
    canvas = document.getElementById("myCanvas");
    c = canvas.getContext("2d");
    drawBox();
    canvas.addEventListener('click', handleClick);
}
function drawBox() {
    c.beginPath();
    c.fillStyle = "white";
    c.lineWidth = 3;
    c.strokeStyle = 'black';
    for (var row = 0; row < 14; row++) {
        for (var column = 0; column < 13; column++) {
            var x = column * 40;
            var y = row * 40;
            c.rect(x, y, 40, 40);
            c.fill();
            c.stroke();
        }
    }
    for(i=0;i<=11;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(80, j,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=40;
    for(i=0;i<=11;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(j, 40,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=0;
    for(i=0;i<=12;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(240, j,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=160;
    for(i=0;i<=9;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(160, j,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=120;
    for(i=0;i<=9;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(j, 480,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=200;
    for(i=0;i<=8;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(360, j,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=200;
    for(i=0;i<=8;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(480, j,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    c.closePath();
}

function handleClick(e) {

    c.fillStyle = "red";
    c.fillRect(Math.floor(e.offsetX/40)*40, 
               Math.floor(e.offsetY/40)*40,
               40, 40);
    x=e.offsetX;
    y=e.offsetY;
    //alert(e.currentTarget);
    //alert(x+"   "+y);
    var sign = prompt("Input letter");
    //alert(sign);
    //sign=sign.toLowerCase();
    switch (sign)
{
case "a":
    //drawtext("a");
    c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("a",x,y);
    alert("a");
  break;
case "b":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("b",x,y);
  alert("b");
  break;
case "c":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("c",x,y);
  alert("c");
  break;
case "d":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("d",x,y);
  alert("d");
  break;
case "e":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("e",x,y);
  alert("e");
  break;
case "f":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("f",x,y);
  alert("f");
  break;
case "g":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("g",x,y);
  alert("g");
  break;
case "h":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("h",x,y);
    alert("h");
  break;
case "i":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("i",x,y);
  alert("i");
  break;
case "j":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("j",x,y);
  alert("j");
  break;
case "k":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("k",x,y);
  alert("k");
  break;
case "l":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("l",x,y);
  alert("l");
  break;
case "m":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("m",x,y);
  alert("m");
  break;
case "n":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("n",x,y);
  alert("n");
  break;
case "o":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("o",x,y);
    alert("o");
  break;
case "p":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("p",x,y);
  alert("p");
  break;
case "q":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("q",x,y);
  alert("q");
  break;
case "r":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("r",x,y);
  alert("r");
  break;
case "s":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("s",x,y);
  alert("s");
  break;
case "t":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("t",x,y);
  alert("t");
  break;
case "u":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("u",x,y);
  alert("u");
  break;
case "v":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("v",x,y);
    alert("v");
  break;
case "w":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("w",x,y);
  alert("w");
  break;
case "x":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("x",x,y);
  alert("y");
  break;
case "y":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("y",x,y);
  alert("y");
  break;
case "z":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("z",x,y);
  alert("z");
  break;
}          
}

Answer 1

In the function handleClick(e), you can write the below snippet of code

var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop;

var imageData2 = c.getImageData(x, y, 40, 40);

if (imageData2.data[0] == 255) {
    return false;
}

This will ignore the the clicks that have been made in the white squares. It will prompt for Input letter if clicked in the blue square.

Your handleClick function will look like this - function handleClick(e) {

c.fillStyle = "red";
c.fillRect(Math.floor(e.offsetX/40)*40, 
           Math.floor(e.offsetY/40)*40,
           40, 40);
x=e.offsetX;
y=e.offsetY;

var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;

var imageData2 = c.getImageData(x, y, 40, 40);

if (imageData2.data[0] == 255) {
    return false;
}


var sign = prompt("Input letter");
switch (sign)
{
    case "a":
        //drawtext("a");
        c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("a",x,y);
        alert("a");
      break;
    case "b":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("b",x,y);
      alert("b");
      break;
    case "c":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("c",x,y);
      alert("c");
      break;
    case "d":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("d",x,y);
      alert("d");
      break;
    case "e":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("e",x,y);
      alert("e");
      break;
    case "f":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("f",x,y);
      alert("f");
      break;
    case "g":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("g",x,y);
      alert("g");
      break;
    case "h":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("h",x,y);
        alert("h");
      break;
    case "i":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("i",x,y);
      alert("i");
      break;
    case "j":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("j",x,y);
      alert("j");
      break;
    case "k":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("k",x,y);
      alert("k");
      break;
    case "l":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("l",x,y);
      alert("l");
      break;
    case "m":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("m",x,y);
      alert("m");
      break;
    case "n":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("n",x,y);
      alert("n");
      break;
    case "o":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("o",x,y);
        alert("o");
      break;
    case "p":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("p",x,y);
      alert("p");
      break;
    case "q":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("q",x,y);
      alert("q");
      break;
    case "r":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("r",x,y);
      alert("r");
      break;
    case "s":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("s",x,y);
      alert("s");
      break;
    case "t":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("t",x,y);
      alert("t");
      break;
    case "u":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("u",x,y);
      alert("u");
      break;
    case "v":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("v",x,y);
        alert("v");
      break;
    case "w":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("w",x,y);
      alert("w");
      break;
    case "x":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("x",x,y);
      alert("y");
      break;
    case "y":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("y",x,y);
      alert("y");
      break;
    case "z":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("z",x,y);
      alert("z");
      break;

}
}