キャンバス - 画像のサイズを変更して変数に保存する

Question

私はさまざまなサイズの画像を取り込む動的な大きさのキャンバスで実行されるブラウザゲームを用意しています。ウィンドウの大きさや、それらを描画します。私のリサイズアルゴの （例:)あなたが見ることができるように

https://jsfiddle.net/8o3sn9mh/55/

var 
canvas = document.getElementById('c'), 
ctx = canvas.getContext('2d'); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
var flower = new Image(); 
//the src is actually local, but i put a url for example's sake 
flower.src = "http://plainicon.com/dboard/userprod/2803_dd580/prod_thumb/plainicon.com-46129-128px-af2.png" 
flower.onload = function(){ 
ctx.drawImage(flower,0,0,128,128, 0, 0, window.innerWidth/2, window.innerHeight/2); 
} 

が、私は128x128pxの画像を描画していると私は半分にサイズを変更するには、ユーザーのウィンドウです。だから私は考えていました。私のゲームは毎回レンダリングの実行ごとにこの操作を行うかもしれませんし、毎回それを実行するために不必要なサイズ変更の時間がかかるかもしれません。だから：

1）私はすべてのrequestAnimationFrameを使用するので、このサイズ変更の実行に時間がかかりますか？

2）イメージを一度サイズ変更してvarに保存し、その時間を節約するために使用する方法はありますか？

かかわらず、私はキャンバスcreatePatternメソッド内に収まるようにするために、VARにリサイズした画像を保存する方法が欲しい：

pattern = ctx.createPattern(resizedFlower, 'repeat'); //resizedFlower should be the original flower resized into half's the user's window's width + height 
ctx.fillStyle = pattern; 
ctx.fillRect(0, 0, 50, 50); 

Answer 1

あなたがキャンバスに画像を保存し、その後でのdrawImageを使用することができますそのキャンバス。例えば：

var canvas = document.getElementById('c'), 
ctx = canvas.getContext('2d'); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 

var flowerCanvas = document.createElement('canvas'); 
flowerCanvas.width = window.innerWidth; 
flowerCanvas.height = window.innerHeight; 
flowerCtx = flowerCanvas.getContext('2d'); 

var flower = new Image(); 
//the src is actually local, but i put a url for example's sake 
flower.src = "http://plainicon.com/dboard/userprod/2803_dd580/prod_thumb/plainicon.com-46129-128px-af2.png" 
flower.onload = function(){ 
    flowerCtx.drawImage(flower,0,0,128,128, 0, 0, window.innerWidth/2, window.innerHeight/2); 
    ctx.drawImage(flowerCanvas,0,0); 
} 

は今、あなたはflowerCanvasを再利用することができ、それはあなたが最初にそれを描いたものは何でもサイズになります。リサイズとサイズ変更の間にパフォーマンスの向上はほとんど見られませんが、実際にはそれをベンチマークする必要があります。

また、すべてのフレームのサイズを変更しないでください。ウィンドウのサイズ変更イベントをリッスンし、そのイベントが発生するとサイズを変更できます。