var MAX_WIDTH = 300;

var MAX_HEIGHT = 300;

​

var width = img.width;

var height = img.height;

​

// Change the resizing logic

if (width > height) {

    if (width > MAX_WIDTH) {

        height = height * (MAX_WIDTH / width);

        width = MAX_WIDTH;

    }

} else {

    if (height > MAX_HEIGHT) {

        width = width * (MAX_HEIGHT / height);

        height = MAX_HEIGHT;

    }

}

​

var canvas = document.createElement("canvas");

canvas.width = width;

canvas.height = height;

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, width, height);