CanvasをRetinaディスプレイに対応させる
imgタグやCSSのbackgroundに設定した画像の場合、2倍サイズの画像を用意してやればいいのですが、
Canvasは例えば2倍サイズの画像をdrawImage()で縮めて貼付けてもRetinaディスプレイ上ではボケボケです。
canvas.widthとcanvas.style.widthは別物
canvas.width, heightは描画領域の大きさを、
canvas.style.width, heightはCanvas自体の大きさを定義しています。
Retinaディスプレイに対応させる場合、描画領域の大きさをCanvas自体の大きさに対して
2倍にしてやる必要があります。
例えば、100px*100pxのCanvasの場合
<canvas width="200" height="200" style="width: 100px; height: 100px;"></canvas>
こうすることで200px*200pxのCanvasが100px*100pxに縮めて表示されます。
あとは2倍サイズの画像や図形を描画してやればOKです。
サンプル
Retinaディスプレイに対応させたCanvas上で図形、テキスト、画像など描画したサンプルを作りました。
通常のPCで見るとほぼ同じですが、Retinaディスプレイの端末から見ると違いが分かるかと思います。
coffeescriptで昔ハマった事
こういう事をすると
class Hoge.Image constructor: -> this.preload() preload: -> image = new Image() #...
こうなって無限再帰になります。頭悪いです。
Hoge.Image = (function() { function Image() { this.preload(); } Image.prototype.preload = function() { var image; return image = new Image(); }; return Image; })();
・document.createElementを使う
・オブジェクトのプロパティでも、組み込みコンストラクタと同じクラス名は絶対に付けない
class Hoge.ImageLoader constructor: -> this.preload() preload: -> image = document.createElement('img') #...
シングルトンにするやつ
CoffeeScriptっぽい実装のクラスを、シングルトンパターンにする