CANVASクリック位置取得:IE8でもfirefoxでも

 CANVASでクリック(マウスダウン)イベントを拾う

 上の水色ブロック内をクリックすると点が打たれます

 コード (コピペ動作確認済み）

IE8ではexcanvas.jsを使っています。 現時点でIE8でもその他でも動作する、出来るだけコンパクト なコードを載せます。コンパクトとはいえ、無名関数の ような"きたなく、おぞましい"ものは使っていません。IE8,IE9,firefox,opera,chrome,safariで 動作確認してあります。
上の表示はこのコードで動いています。

<!--[if lt IE 9]>
<script type="text/javascript" src="../../../js/excanvas.js"></script>
<![endif]-->
<canvas id="canvas1" width=480 height=130
        style='background-color:#C0C0F0'></canvas><br>
<script type="text/javascript">
var canvas;
var context;
function draw(x,y){     // 点描写
   context            = canvas.getContext('2d');
   context.beginPath();
   context.arc(x,y,4,0,Math.PI*2,false);
   context.stroke();
   }
function clearCanvas(){ // 画面消去
   context            = canvas.getContext('2d');
   context.clearRect(0,0,canvas.width,canvas.height);
   }
function clicked( e ){  // マウス押しイベント
   if( !e ) e=window.event;                  // eが通知されない場合もある
   var rect = canvas.getBoundingClientRect();// eにtargetが無い場合もある
   draw(  e.clientX - rect.left ,  e.clientY - rect.top );// 位置補正
   }
function start(){
   canvas             = document.getElementById('canvas1');
   //context            = canvas.getContext('2d');
   canvas.onmousedown = clicked; // イベント処理関数登録
   }
try{      window.addEventListener("load",start,false); }// 起動呪文
catch(e){ window.attachEvent("onload",start); }         // 起動呪文
</script>
<input type="button" onClick="clearCanvas();" value="clear"/>

コード先頭の<!--[if lt IE 9]>...はCANVASを実装していないIE8で excanvas.jsというライブラリでCANVASをエミュレートするものです。このライブラリを ダウンロードして、src=で参照すればこのコードはIE8でも動作します。

canvasはFlashやAppletのような明確な仕様の元に作成されているものでは ないので、無数の落とし穴があり、使うのはとんでもなく大変です。

例えば、サイズを次のようにcss指定すると、firefoxやSafariでは縦横の歪んだものとなります。 バグなのか仕様なのかは不明です。 HTML5は発想そのものがバグだ、という意見に関してはここでは述べません。

<canvas id="canvas1"
        style='width:492px;height:130px;background-color:#C0C0F0'></canvas>

マウスイベントで上がる位置も、canvasで発生しているにもかかわらず、 window内の位置となり、馬鹿げた補正が必要です。