Helper functions: Resize images to a variable thumbnail size

As part of the “Creating thumbnails with drag and drop and HTML5 canvas” post on MDN today, I spent some time creating a short and working resizing function that takes an arbitrary image and re-sizes it to fit into a thumbnail of a certain width and height. After a few failed attempts I googled around and actually found one of my old PHP/GD tutorials I thought I had deleted years ago. Well, the function still works :) Without further ado, here is the resize() function (also available as a gist).

function resize( imagewidth, imageheight, thumbwidth, thumbheight ) {
var w = 0, h = 0, x = 0, y = 0,
widthratio = imagewidth / thumbwidth,
heightratio = imageheight / thumbheight,
maxratio = Math.max( widthratio, heightratio );
if ( maxratio > 1 ) {
w = imagewidth / maxratio;
h = imageheight / maxratio;
} else {
w = imagewidth;
h = imageheight;
}
x = ( thumbwidth - w ) / 2;
y = ( thumbheight - h ) / 2;
return { w:w, h:h, x:x, y:y };
};

The returned data is the width and the height of the image and the x and y position in the thumbnail – ready to use in HTML5 canvas. You can test the function in this Fiddle: Tags: helpers, image, resizing, thumbnails