CODEWITHSUNDEEP
javascriptcanvasresize
user1938653
user1938653

Reputation: 609

Canvas - resize image and save to a variable

So, I have a browser game which is run by a canvas with dynamic dimensions(it scales to the user's window's dimensions) which takes images at various sizes, scales them according to the user's window dimensions and draws them: (example of my resizing algo:)

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);
}

as you can see, I am drawing a 128x128px image and I resize it to half's the user's window. So, I was thinking - my game may do this operation every single render execution, and it may take unnecessary resizing time to perform it every time. So:

1) Does performing this resizing take more time since I use it every requestAnimationFrame?

2) Is there a way to resize my image one time, save it into a var and use it in order to save that time?

Regardless I'd like a way to save the resized image into a var in order to fit it inside canvas' createPattern method:

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);

Upvotes: 1

Views: 2106

Answers (1)

Josh
Josh

Reputation: 338

You can save your image to a canvas and then use drawImage with that canvas. For instance:

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);
}

Now you can reuse flowerCanvas and it will be whatever size you initially drew it at. You probably won't see much of a performance gain between resizing vs not resizing, although you should benchmark it to be sure.

Also you shouldn't resize everything everyframe, you can listen for a window resize event, and resize when that event fires.

Upvotes: 1

Related Questions