how to fill a cell on clicking the grid on canvas in html5

Question

I want to fill a grid cell on clicking on the particular cell.Here is my code:

 function drawBox()
    {   
        for (var row = 0; row < 14; row ++)
        {
            for (var column = 0; column < 13; column ++)
            {
                var x = column * 40;
                var y = row * 40;
                context.beginPath();
                context.rect(x, y, 40, 40);
                context.fillStyle = "white";
                context.fill();
                context.lineWidth = 3;
                context.strokeStyle = 'black';
                context.stroke();
            }
        }

    }

Answer 1

I've got a working sample here. Code :

 var canvas = document.getElementById("canvas"), c = canvas.getContext("2d"), boxSize = 40, boxes = Math.floor(600 / boxSize); canvas.addEventListener('click', handleClick); canvas.addEventListener('mousemove', handleClick); function drawBox() { c.beginPath(); c.fillStyle = "white"; c.lineWidth = 3; c.strokeStyle = 'black'; for (var row = 0; row < boxes; row++) { for (var column = 0; column < boxes; column++) { var x = column * boxSize; var y = row * boxSize; c.rect(x, y, boxSize, boxSize); c.fill(); c.stroke(); } } c.closePath(); } function handleClick(e) { c.fillStyle = "black"; c.fillRect(Math.floor(e.offsetX / boxSize) * boxSize, Math.floor(e.offsetY / boxSize) * boxSize, boxSize, boxSize); } drawBox(); 

 <canvas id="canvas" width="600px" height="600px"></canvas> 

I edited the drawBox() function a bit to increase efficiency, also.

e.offsetX is the mouse coordinate, devide by 40 , then Math.floor() this to get the cell number, then multiply by 40 to get the starting coordinate of the cell.