使用html5画一个棋盘

<canvas id="chess" width="1300" height="800"></canvas>

   <script type="text/javascript">
       var grid = 30;
var h = 50;
var dig = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];
var w = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S'];
var x = [];
var y = [];
function draw() {
var c = document.getElementById("chess");
var cxt = c.getContext('2d');
cxt.font = "bold 13px Arial";


for (var i = 0; i < 19; i++) {
cxt.fillText(dig[i],200+i*grid - 3,h - 10);
}
for (var i = 0; i < 19; i++) {
cxt.fillText(w[i],200 - 20,grid*i + h + 5);
}
cxt.beginPath();
cxt.moveTo(200,h);
cxt.lineTo(grid*18 + 200,h);
for(var i = 1; i < 19; i++) {
cxt.moveTo(200,i*grid + h);
cxt.lineTo(grid*18 + 200,i*grid + h);
if (i == 3 || i == 9 || i == 15) {
var p = new Point();
p.x = grid*i+200;
p.y = i*grid+h;
y.push(p);
}
}
for(var i = 1; i < 20; i++) {
cxt.moveTo(200 + (i - 1)*grid,h);
cxt.lineTo(200 + (i - 1)*grid, grid*18 + h);
if (i == 4 || i == 10 || i == 16) {
var p = new Point();
p.x = 200 + (i - 1)*grid;
p.y = grid*i + h;


x.push(p);
}
}
cxt.closePath();
cxt.stroke();


for(var i = 0; i < x.length; i++) {
cxt.beginPath();
var px = x[i];
for(var j = 0; j < y.length; j++) {
var py = y[j];
cxt.arc(px.x,py.y,10,0,Math.PI*2,true);
}
cxt.fill();
cxt.closePath();


}


}


function Point() {
this.x = x;
this.y = y;
}
draw();

</script>