createJSを使ってcanvasでマウスの位置にshapeを表示するコードを書いていた時の話

ページ読み込み時のウィンドウサイズに応じてcanvasの大きさをjQueryで変更し，

  document.getElementById("demoCanvas").addEventListener("mousemove", mouseMoveHandler, false);

function mouseMoveHandler(e) {
   var rect = e.target.getBoundingClientRect();
   shape.x = e.clientX -rect.left;
   shape.y = e.clientY -rect.top;
}

というようにshapeの位置をマウスの位置に応じて変更するようなコードを書いていたが，マウスイベントでは正しいポジションを返しているにもかかわらず，どうあってもマウスの位置にshapeが描画されない．

canvasはCSSでサイズを指定してはいけない

canvasの要素でwidth、heightを指定していないとデフォルトの300px - 150pxになるらしい．それを単にCSSで引き伸ばし/縮小した状況になる.

そのため，もともとは


// これは動かない!!
$("#deomoCanvas").width(w);
$("#deomoCanvas").height(h);

で指定していたがこれでは描画がおかしくなるので，

$('#canvas').attr('width', w);
$('#canvas').attr('height', h);

で指定する必要がある．