canvasで図面を実装するphoneGapを操作する。キャンバスには、特定のピクセルサイズが必要であるということがあります。技術的には640の実際の画面ピクセルがあるにもかかわらず、CSS/Webkit POVからのiPhone 4のRetinaディスプレイがまだ320pxの幅であることを除いて、これは問題ありません。キャンバスのドローイングと網膜の表示：ドバイ？
Webkit上のCanvasを使用して網膜ディスプレイに対応し、非網膜ディスプレイとの互換性を維持していますか？
私は先週と同じ問題に座って、それを解決する方法を発見 -
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
if (window.devicePixelRatio > 1) {
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
canvas.width = canvasWidth * window.devicePixelRatio;
canvas.height = canvasHeight * window.devicePixelRatio;
canvas.style.width = canvasWidth;
canvas.style.height = canvasHeight;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
非常に遅れている「感謝！私はすぐにこれを試して欲しい。 –
このサイトをどこか鏡にしていただけますか？そのリンクは壊れています。 –
ソリューションを常にstackoverflowにコピーして貼り付けてください。サイトがオフラインになっても使用できるようになります。 – kritzikratzi
Webコード（http://www.webcodeapp.com）はあなたのためのJavaScript HTML5のCanvasコードを生成するベクトル描画アプリです。コードはRetinaと互換性があり、あなたはどのようにそれを行うことができますチェックアウトすることができます。
それはまた、私にhttp://code.google.com/p/canvg/を思い出させる。網膜をどのように扱うかを確認してください。 –
あなたに最も基本的な描画操作を処理するdrop-in polyfillがあります。これを自動的に処理するブラウザ（Safari）とそうでないものの間のあいまいさを取り除きます。
https://github.com/jondavidjohn/hidpi-canvas-polyfill
あなたは、単にあなたの描画コードの前にそれを含めると、それが自動的にあなたにまともな網膜のサポートを与えるべきです。
このpolyfillはキャンバスを私のキャンバスに描画するたびに私のキャンバスを奇妙に成長させ、最終的にはSafariのタブをほとんどクラッシュさせます。私は手動でやろうと思う。 –
@JaredUpdike githubの問題を介して報告するための素晴らしい候補者のように、詳細な例があるので、他の人に修正される可能性があります。 – jondavidjohn
EDIT：ちょうど私がデモの間違ったリンクを投稿しました！
網膜（または他のhdpiディスプレイ）のキャンバス解像度は間違いなく可能です。
http://spencer-evans.com/share/github/canvas-resizer/
私もこの数回にぶつかってきた。ここで働く例があります。受け入れられた回答コードは基本的には正しいですが、ライブラリソリューションを使用することもできます。私はインテリジェントなキャンバスのサイズ変更を処理して要素の反応性を高め、解像度を高めました（デモに示すように）。
TJ Holowaychukによって非常に良いポリフィルがあります：
は、ドロップインソリューションのための私の答えを見るhttp://stackoverflow.com/a/19546481/555384 – jondavidjohn