วาดกริด (Grid) ด้วย HTML5 Canvas หรือ SVG

ตัวอย่างวาดกริดบน Canvas ด้วย JavaScript

// กำหนดขนาดกริดและ padding
var grid_w = 200;
var grid_h = 200;
var grid_padding = 15;

// ขนาด Canvas
var canvas_w = grid_w + (grid_padding * 2) + 1;
var canvas_h = grid_h + (grid_padding * 2) + 1;

// สร้าง Canvas element
var canvas = $('').attr({width: canvas_w, height: canvas_h}).appendTo('body');
var ctx = canvas.get(0).getContext("2d");

// ฟังก์ชันวาดกริด
function drawBoard() {
    for (var a = 0; a <= grid_w; a += 50) {
        ctx.moveTo(0.5 + a + grid_padding, grid_padding);
        ctx.lineTo(0.5 + a + grid_padding, grid_h + grid_padding);
    }
    // วาดเส้นแนวนอนคล้ายกัน...
    ctx.strokeStyle = "#ccc";
    ctx.stroke();
}

drawBoard();

หลักการ: คำนวณตำแหน่งเส้น ตามด้วย moveTo และ lineTo แล้ว stroke()