Q:

Draw a square version of image in canvas

I am trying to show previews of uploaded images in a canvas. The preview should be a square version of image.
What I have:
var img = new Image;
img.src = imageSrc;
var c = document.getElementById('file-preview-' + data.response.id);
var ctx = c.getContext("2d");
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};

And the preview:

So how can I draw on the canvas a 150x150 square with maintained ratio cropped version of the image?
For example for this image:

I should get:

A:

Here's a method that yields precisely the result you desire, cropped, resized and centered (with commented out lines that yield a left based cropping instead)...

    var ctx;
    function init(event) {
     ctx = document.getElementById('canvas').getContext('2d');
        // Your preview is actually 120x120,
        // but I've stuck with the textual description of
        // your requirements here.
     ctx.canvas.width = 150;
     ctx.canvas.height = 150;
     loadBackground('http://i.stack.imgur.com/PCKEo.png');
    }
    
    function loadBackground(path) {
     var img = new Image();
     img.onload = drawBackground;
     img.src = path;
    }

    function drawBackground(event) {
     var img = event.target;
     var imgSize = Math.min(img.width, img.height);
        // The following two lines yield a central based cropping.
        // They can both be amended to be 0, if you wish it to be
        // a left based cropped image.
     var left = (img.width - imgSize) / 2;
     var top = (img.height - imgSize) / 2;
        //var left = 0; // If you wish left based cropping instead.
        //var top = 0; // If you wish left based cropping instead.
     ctx.drawImage(event.target, left, top, imgSize, imgSize, 0, 0, ctx.canvas.width, ctx.canvas.height);
    }
    
    window.addEventListener('load', init, false);
<canvas id="canvas"></canvas>

