私はHTML5キャンバス要素として描画インターフェース（PaintやPhotoshopなど）を組み込んだアプリケーションを開発しています。HTML5キャンバスとコンテンツのサイズ変更と拡大縮小
ズーム機能をシミュレートするために、キャンバス要素とピクセルデータを動的にサイズ変更したいと考えています。私の考えは、キャンバス要素を含む何らかのビューポートを持っています。キャンバスとその内容をビューポート内でサイズ変更することができます（同じサイズのままです）。
どのようにこの機能を実装するのが最適でしょうか？
これは、別のキャンバスを導入して描画面からディスプレイを分離することで、非常に簡単に行うことができます。
var canvas = document.createElement('canvas');
を使用して非表示のキャンバスを作成してから、このキャンバスにシーン全体を描画します。次に、このキャンバスの内容を、drawImageメソッド（画像の代わりにキャンバスを受け取る可能性があります）を使用して実際にユーザーに見える別のキャンバスに描画します。シーンを拡大表示する場合は、非表示キャンバスのソース矩形（sy、sx、sw、shのパラメータはdrawImage）をビジュアルキャンバスに描画するときに小さくします。これにより、ズーム効果が得られます。
しかし、キャンバスに各フレームを完全に再描画しても、キャンバスオブジェクトのscale methodを見ることができます。
ありがとうございました。 –
私は+1をしています:) –
私は試しましたが、私のアカウントはまだそれが可能だとは思わない。 :( あなたはまだうまくいった仕事の満足を得る：D –
私はcanvas要素とその内容にtransform：scale（）を使用して成功しています。 しかし、iframeでキャンバス要素を持ち込む必要があり、transform：scaleがiframeで発生する場合は、Safariでは動作しますが、モバイルサファリでは動作しません。
下の関連リンクあなたはその後、キャンバスのサイズを変更し、伸ばしているスクリーンショットを描き、 '.toDataURLを（）'使用して「スクリーンショット」を救うことができます。ただし、キャンバスはピクセル化されないため、ぼやけて見えます。 – pimvdb
可能な複製：http://stackoverflow.com/questions/331052/how-to-resize-html-canvas-element –