Question

So, I create a few images like this:

images = [];

images[0] = new Image();
images[0].src = "bla.jpg";

images[1] = new Image();
images[1].src = "bla1.jpg";

images[2] = new Image();
images[2].src = "bla2.jpg";

This isn’t the actual loading algorithm, but the product is the same: I’m left with an array called “images”, which, of course, contains a few images.

I’m making a game, and I need to resize the canvas, to fit the screen size of the player. I know how to do that, but now, I need to resize all of the images as well. I don’t know how to do that.

My initial approach was this:

for (var i = 0; i < images.length; i ++)
{
    images[i].width *= ratio; // newWidth/defaultWidth
    images[i].height *= ratio;
}

I didn’t notice a change, though, so I did this, just to be sure:

for (var i = 0; i < images.length; i ++)
{
    images[i].width = 3; //I'd probably notice if every image in the game was shrunk to this size
    images[i].height = 3;
}

This was even stranger. The images, again, remained unchanged, however, the game slowed a lot. The FPS went down to 0.5 or something similar.

Now, how do I go about resizing images?

EDIT: I do not, of course, wish to resize the images in real time like this:

context.drawImage(image, x, y, image.w*r, image.h*r);

Because in my experience, it greatly reduces the performance.

Answer 1

Instead of setting width & height attributes, set the css properties instead:

var i, image;
for ( i = 0; i < images.length; i++ )
{
    image = $( images[i] );
    image.css( 'width', image.width() * ratio );
    image.css( 'height', image.height() * ratio );
}