将棋などのゲームのマスの実装

オセロや将棋のような盤をHTML5+JavaScriptで実装する場合、

1.盤全体をひとつのCanvasにする
2.マスそれぞれをCanvasにする
3.マスを構成する要素imgなどをそれぞれ並べる

という方法が考えられる。どれを選択するか。

1.盤全体をひとつのCanvasにする

• (+)HTMLスッキリ
• (+)CSS(position, top, leftやら)の設定がめんどくさくないかもしれない
• (+)Canvas内部はブラウザによって見た目が変わりにくい
• (-)Canvasって重くね？

2.マスそれぞれをCanvasにする

• (+)HTMLちょっとスッキリ
• (+)onmousedownとか登録すればオブジェクト指向的でわかりやすい
• (+)Canvas内部はブラウザによって見た目が変わりにくい
• (-)Canvasって重くね？

3.マスを構成する要素imgなどをそれぞれ並べる

• (+)重くなさそう
• (+)マスをぜんぶ再描画しなくても、変更したい構成要素をいじるだけで実現可能
• (-)クリックイベントなどが登録しにくい
• (-)ブラウザによって見た目が変わりそう
• (-)派手な動きさせにくそう
• (-)CSS(position, top, leftやら)めんどそう
• (-)HTMLぐちゃぐちゃ

クリックイベントなどが登録しにくい問題は特に、マス全体に渡る要素が必ず一番上（z-index）にあるとは限らないので、一番上に

html

<span id="responseClick" style="z-index:9999; width:30px; height:30px;"></span>

みたいのを置いて、それにonmousedownなどを設定する必要があるだろう。

最初は３でやろうと思っていたのだが、ブラウザによって見え方変わりそう、ということを考えると、やっぱ１か２かなあ。

２は、クリックイベントを登録する方法がよくわからず非常に難しい。

たとえばマスを

html

<canvas id="c0" style="width:30px; height:30px;"></canvas>
<canvas id="c1" style="width:30px; height:30px;"></canvas>

js

var ClassCell = function(iId){
   this.mId = iId;
   this.mCanvas = document.getElementById('c'+iId);

   this.Click = function(e){
      console.log(""+this.mId+"クリックされました")
   }

   this.mCanvas.onclick = this.Click;
};

var cells = [
   new ClassCell(0),
   new ClassCell(1)
];

みたいにクラス化した場合、たとえばがクリックされると、ClassCell.Click内のthisがCanvasを意味してしまって、うまく働かない。
まさか

js

var cells = [
   new ClassCell(0),
   new ClassCell(1)
];

function c0click(e){
   cells[0].mCanvas.Click(e);
}
function c1click(e){
   cells[1].mCanvas.Click(e);
}

cells[0].mCanvas.onclick = c0click;
cells[1].mCanvas.onclick = c1click;

とかマスの数だけやるのもアホらしいし……。
なんかいい方法あんのかな？
ないなら、１の方法でやるしかあるまい……。

いい方法があったら教えてほしいです。

追記

@Karakuri さんがコメントに書いてくださった方法
下記のコードでできました。
どういう理屈なんだこれ～

html

<canvas id="c0" style="border:solid;"></canvas>
<canvas id="c1" style="border:solid;"></canvas>

js

var cells = [];
$().ready(function(){
	cells = [
		new ClassCell(0),
		new ClassCell(1)
	];
});

var ClassCell = function(iId){
   var self = this;
   this.mId = iId;
   this.mCanvas = document.getElementById('c'+iId);

   this.Click = function(e){
      console.log(""+self.mId+"クリックされました")
   }

   this.mCanvas.onclick = this.Click;
};

それぞれをクリックした実行結果

0クリックされました
1クリックされました