JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="example">

JavaScript

var pic = 'http://www.tutorialspark.com/html5/Clip_Crop.png';
$("<img/>")
    .attr('src', pic)
    .load(function () {

    var canvas = document.getElementById('example'),
        context = canvas.getContext('2d'),
        img = new Image();

    canvas.width = 400;
    canvas.height = 200;

    img.src = pic;

    img.onload = function () {

        var sx = 0,
            sy = 0,
            sWide = this.width,
            sHi = this.height,
            dx = 0,
            dy = 0,
            dWide = canvas.width,
            dHi = canvas.height;

        if (canvas.width >= canvas.height) {
            dy = -((canvas.width - canvas.height) / 2);
            dHi = canvas.width;
        } else {
            dx = -((canvas.height - canvas.width) / 2);
            dWide = canvas.height;
        }

        if (this.width >= this.height) {
            sx = (this.width - this.height) / 2;
            sWide = this.height;
        } else {
            sy = (this.height - this.width) / 2;
            sHi = this.width;
        }

        context.drawImage(img, sx, sy, sWide, sHi, dx, dy, dWide, dHi);
    };
});