[enchant.js]格子(グリッド,grid)を描画する関数[javascript]

オセロや将棋のゲームを作りたい！
と思ったら、まずは格子を用意しなければならない。
簡単に作るために関数(メソッド)化してみた

格子を描画するメソッド

左上の座標が(lx, ly)
横のマスの数が x, 縦のマスの数が y
マスの幅が len
である格子(グリッド)を描画するメソッド

avascript:main.js

function draw_grid(lx, ly, x, y, len){
    sprite = new Sprite(320, 320);
    surface = new Surface(320, 320);
    sprite.image = surface;
    context = surface.context;
    for(var i=0; i<=x; i++){
        context.beginPath();
        context.moveTo(lx, ly + (len * i));
        context.lineTo(lx + (len * y), ly + (len * i));
        context.closePath();
        context.stroke();
    }
    for(var i=0; i<=y; i++){
        context.beginPath();
        context.moveTo(lx + (len * i), ly);
        context.lineTo(lx + (len * i), ly + (len * x));
        context.closePath();
        context.stroke();
    }
}

ブラウザでの見た目

因みに、

main.js

draw_grid(10, 30, 4, 3, 30);

と呼び出すと、

このような表示になる