以前のリビジョンの文書です
デフォルトでは画像拡大時にぼかしが入るので、これを無効化します。(参考:phina.jsのゲーム制作にあたって工夫したところと、JavaScript入門者が陥ったつまづきポイントについて。 - Qiita)
Math.round()等を使用して、画像の座標は整数になるようにします。
とりあえずsceneのinitで以下の処理を入れてみました。
this.canvas.imageSmoothingEnabled = false;
image-rendering CSS プロパティでぼかしを入れないように設定します。(参考:image-rendering - CSS | MDN)
img[src$=".gif"], img[src$=".png"] { image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast;/* Webkit (非標準の名前) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (非標準プロパティ) */ }
デフォルトではウィンドウサイズに合わせてCanvasを拡大してしまうので、これを無効化します。(canvasのサイズを自動的に調整されないようにする)