HTML5キャンバスはブラウザベースの拡大をサポートしていますか？

Question

fillTextを描画したシンプルなキャンバスをセットアップしました。それはかなりいいようですが、ブラウザで提供されているズーム機能（Safari、Firefox）を使用すると、アンチエイリアスが醜いように見えます。

私はscale（）を使ってグリッドを上げようとしましたが、それは役に立ちません。

ズームされたブラウザウィンドウでもシャープに見えるキャンバスに描画する方法はありますか？

---

スクリーンショット（なしズーム）：http://i.stack.imgur.com/CGWka.png

スクリーンショット（最大ズーム）：http://i.stack.imgur.com/vNPjF.png

Answer 1

あなたは「ズーム」の項目になるための描画コマンドをする前に、キャンバスのコンテキストをスケーリングすることによりキャンバスを描くことができますより大きなサイズで、スムーズに。たとえば、描画アイテムをズームインしたり、デフォルトのプレゼンテーションでは利用できない詳細を表示したりすることができるthis example of mineを参照してください。

ブラウザズームの問題は、HTML5キャンバスはJPGまたはPNGのように、SVGとは異なり、個々のピクセルに基づいていることです。 10ピクセルで円を描き、ブラウザーに50ピクセルにズームするようブラウザに指示すると、ブラウザーは円滑な円を描画するためにデータを「発明」できません。それができる最善の方法は、画像補間を行い、「ビッグピクセル」の見た目をややスムーズにすることです。画像付き

ソリューション

、あなたはピクセルの多くの写真を撮る（例えば1000x800）と異なる、小さいサイズ（例えば250x200）でそれを表示するには、ブラウザを伝えることができます。ブラウザがズームインすると、は表示するピクセルがになります。例：

<img src="1000x800.jpg" style="width:250px; height:200px"> 

キャンバスでも同じことができます。キャンバス内のデータのピクセル数は、heightと属性（HTMLまたはJavaScript）で指定されます。 CSS ディスプレイサイズ（上記と同様）を別のサイズに個別に指定することができます。既存のキャンバスの描画コードを変更する必要はありません。単に：

1. （例えば4）、
2. 使用CSSを前に、すべての
3. 、ディスプレイの高さを設定し、元のサイズに幅、およびする特定の要因によって、キャンバスのheightとwidthを調整します他の描画コマンドは、ctx.scale(4,4)でコンテキストを拡大します。

編集：私はここで、この例を作成しました：
http://jsfiddle.net/u5QPq/embedded/result/（code）

をここであなたが拡大すると、それは次のようになります。追加ボーナスとして

、あなたのキャンバスもよりスムーズに印刷されます（誰かが木を殺す場合に備えて）。