Canvas Table Demo

by Ron Eaglin

HTML

<canvas id="table_demo" width="640" height="480">Alternative text if browser don't support canvas.</canvas>

JavaScript

var canvas;
var ctx;
 
var background; // you can make a custom background
var x0 = 100;
var y0 = 100;
var cell_size = 50;
var num_cells = 10;

 
function init() {
    canvas = document.getElementById("table_demo");
    width = canvas.width;
    height = canvas.height;
    ctx = canvas.getContext("2d");
 
    // init background 
  
    for (var i=0;i<num_cells+1;i++){
       ctx.lineWidth = 2;
       ctx.beginPath();
       ctx.moveTo(x0+i*cell_size,y0);
       ctx.lineTo(x0+i*cell_size,y0+num_cells*cell_size);
       ctx.stroke();
    }

    for (var i=0;i<num_cells+1;i++){
       ctx.lineWidth = 2;
       ctx.beginPath();
       ctx.moveTo(x0,y0+i*cell_size);
       ctx.lineTo(x0+num_cells*cell_size,y0+i*cell_size);
       ctx.stroke();
    }

        
    return setInterval(main_loop, 10);
}
 
function update(){
// Move your game pieces
}
 
function draw() {
    
//Draw your game pieces
}
 
function main_loop() {

    update();
    draw();
}
 
init();