Canvas - изменение размера изображения и сохранение переменной

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) Выполняет ли это изменение размера больше времени с тех пор, как я использую его каждый запрос?

2) Есть ли способ изменить размер моего изображения один раз, сохранить его в var и использовать его, чтобы сэкономить это время?

Независимо от того, я хотел бы способ, чтобы сохранить уменьшенное изображение в вар, чтобы соответствовать его внутри createPattern метода холста:

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 и будет, независимо от размера первоначально обратил его на. Вероятно, вы вряд ли увидите большую выгоду от изменения размера между изменением размера и изменением размера, хотя вам следует проверить его, чтобы быть уверенным.

Также вы не должны изменять размер всего экрана, вы можете прослушивать событие изменения размера окна и изменять размер при возникновении этого события.