Modify the blank Canvas into a matrix

Question

I know that < canvas> < /canvas> draws a blank space where I have to add shapes.

In my project, the user needs to draw on a matrix, not on white space. How do I do that?

Answer 1

Here is how to draw gridlines on html canvas:

A Demo: http://jsfiddle.net/m1erickson/DwdX6/

function drawGrid(lineCount){
    var xSpan=cw/lineCount;
    var ySpan=cw/lineCount;
    ctx.clearRect(0,0,cw,ch);
    ctx.save();
    if(lineCount/2===parseInt(lineCount/2)){
        ctx.translate(.5,.5);
    }
    ctx.beginPath();
    for(var i=0;i<lineCount;i++){
        var x=(i+1)*xSpan;
        var y=(i+1)*ySpan;
        ctx.moveTo(x,0);
        ctx.lineTo(x,ch);
        ctx.moveTo(0,y);
        ctx.lineTo(ch,y);
    }
    ctx.lineWidth=0.50;
    ctx.stroke();
    ctx.restore();
}