古典的なぼかしの問題がありますが、実際の解決策が見つからない

Question

形状が少しぼやけて描画されているという問題を知っています。 easeljsのステージを使用した場合

context.sRect=function(x,y,w,h){ 
x=parseInt(x)+0.50; 
    y=parseInt(y)+0.50; 
    this.strokeRect(x,y,w,h); 
} 
context.fRect=function(x,y,w,h){ 
    x=parseInt(x); 
    y=parseInt(y); 
    context.fillRect(x,y,w,h); 
} 

はしかし、これらの方法は、すべての影響を持っていけないと形状がぼやけ滞在：次の方法で、プレーンJSやキャンバスを使用したとき、私はさらに問題もなくそれを修正することができました。私はまた、drawRect（）を使うときに、xとy、幅と高さを-.5だけオフセットしてみました。それもどちらかの仕事ではありませんでした。私が最後に試したのは、stage.regXとstage.regYを-.5に設定して、出力を変更しましたが、変更されたぼかし（わずかにぼやけている）のみにしました。 私は何かを見逃しましたか？

PS：常に同じ幅と高さ（200 * 200）を持つようにキャンバスが必要ですが、同時に画面は常に塗りつぶします。私は常にcanvas.width/heightを200に設定し、キャンバスのCSSを100％に設定することでこれを達成します。

Answer 1

簡易回答：できません。

キャンバスの拡大縮小にCSSを使用する場合、キャンバス上の各ピクセルを個別に拡大縮小すると考えることができます。このため、ブラウザ自体のアンチエイリアスに対処する必要があります。

ラスタグラフィックスでアンチエイリアスを正確に打ち消すには、ピクセル単位で情報を量子化するだけで、常にコンテナより多くのスペースが必要です。キャンバスに一定量の情報（200x200ピクセル）を保持させる場合、これは不可能です。

あなたはまだやることができ、モデルとしてそのキャンバスを使用しているが、ビューではなく;）

私は変数空間上の固定サイズのキャンバスのアンチエイリアスを望んでいなかった場合、私は別のキャンバスを作成したいですそのサイズはCSSに依存しませんが、jsイベント（window resize event listenerとwindow.innerWidth, window.innerHeightを参照）にして、ctx.imageSmoothingEnabled（= false）を無効にしている間に「モデル」の元のキャンバスを描画して、必要な結果を得ます。

ことはここでは、最小限の例です：

var canvasModel = document.createElement('canvas'), // your current canvas 
    canvas = document.getElementById('view-canvas'), // displaying on the screen 
    ctxModel = canvasModel.getContext('2d'), 
    ctx = canvas.getContext('2d'); 

ctx.imageSmoothingEnabled = false; 

// all of your stuff that you're currently doing goes here 
... 

// every time you update the 200x200 canvas, you do this: 
ctx.drawImage(canvasModel, 0, 0, w, h);