Tile grid

HTML

<canvas id="canvas"></canvas>

JavaScript

var ctx = canvas.getContext('2d'),
    columns = 1,
    rows = 10,
    w, h, tileWidth, tileHeight;

window.onresize = calcSize;
canvas.onmousemove = highlight;

calcSize();

function calcSize() {
    canvas.width = w = window.innerWidth;
    canvas.height = h = window.innerHeight;

    tileWidth = w / columns;
    tileHeight = h / rows;

    render();
}

function render() {
    ctx.strokeStyle = '#aaa';
    ctx.clearRect(0, 0, w, h);
    ctx.beginPath();

    for (var x = 0; x < columns; x++) {
        ctx.moveTo(x * tileWidth, 0);
        ctx.lineTo(x * tileWidth, h);
    }

    for (var y = 0; y < rows; y++) {
        ctx.moveTo(0, y * tileHeight);
        ctx.lineTo(w, y * tileHeight);
    }

    ctx.stroke();

    for (var i = 0; i < rows; i++) {
        for (var u = 0; u < columns; u++) {
            ctx.fillStyle = (i + u) % 2 == 0 ? '#eee' : '#ddd';
            ctx.fillRect(u * tileWidth, i * tileHeight, tileWidth, tileHeight);
        }
    }

    ctx.fillStyle = '#aaa';
}

function highlight(e) {
    var rect = canvas.getBoundingClientRect(),
        mx = e.clientX - rect.left,
        my = e.clientY - rect.top,

        /// get index from mouse position
        xIndex = Math.round((mx - tileWidth * 0.5) / tileWidth),
        yIndex = Math.round((my - tileHeight * 0.5) / tileHeight);

    render();

    ctx.fillRect(xIndex * tileWidth,
        yIndex * tileHeight,
        tileWidth,
        tileHeight);

}