すべてのデバイスにピクセル完璧なキャンバスを表示

Question

すべての（最新の）ブラウザでピクセル完全に表示したいキャンバスがあります。デフォルトでは、DPIの高い画面のデバイスはページを拡大してすべてが正しいサイズに見えるようにしていますが、キャンバスの外観が壊れています。

キャンバス内の1ピクセル=画面上の1ピクセルを保証するにはどうすればよいですか？これは、ページ上の他の要素には影響しません。テキストはデバイスに合わせて適切に拡大縮小されます。

私は既にwindow.devicePixelRatioに基づいてキャンバスの寸法をスタイリングしてみました。それはキャンバスを適切なサイズにしますが、コンテンツはさらに悪く見えます。私は彼らがすでに間違ってスケールアップされた後にそれらをスケールダウンすることを推測しています。

*あなたが気にした場合、キャンバスは、ディザリングを使用してブラウザがいくつかlerpの種類ではなく、最近傍

Answer 1

をやっているので、それは簡単です：

canvas { 
    image-rendering: pixelated; 
} 

ブラウザのサポートはgreatではありませんが、これまでのところ、私がテストした最新のブラウザすべてで動作していたので、私は満足しています。

キャンバスが通常のサイズで表示されている限り、これは通常のDPIデバイスには影響しません。また、画面によっては、高DPIデバイスで興味深い成果物が得られますが、これらのディスプレイがどのように動作するのかは避けられません。彼らはまだあなたがスタイルなしで得る人工物よりも優れています。

---

また、私はJavaScriptで最近傍で私のキャンバスのすべて200％にアップスケーリングして、通常サイズのdivの背景画像として、それらを設定してみました。これは、Appleが網膜デバイスの画像を表示することを推奨しているので、大きな結果をもたらすと思っていました。しかし、あなたはまだアーティファクトで終わってしまい、ページを拡大することで修正されていないので、上記の単純なものよりも実際に悪いです。