JSFiddle - React, Tailwind, and code Playground

JavaScript

var img = new Image;
var canvas = $('<canvas></canvas>').css({ display: 'hidden' }).appendTo('body');
var context = canvas[0].getContext('2d');
var width, height, canvasDimension;
                                         
img.onload = function() {
    
    // Get width of the image
    width = this.width;
    height = this.height;   
    
    // set canvas to the right size
    canvasDimension = width < height ? width : height;
    
    $(canvas).attr('width', canvasDimension).attr('height', height);

    // draw circle for clip
    context.beginPath();
    context.arc(canvasDimension / 2, canvasDimension / 2, canvasDimension / 2, 0, 2 * Math.PI, false);
    context.fillStyle = 'rgba(0, 0, 0, 0)';
    context.fill();
    
    // clip
    context.clip();
    
    var xOffset = (width - canvasDimension) / 2; 
    var yOffset = (height - canvasDimension) / 2;      
    // draw image to the canvas
    context.drawImage(
        
        img, // image
        xOffset,
        yOffset,
        width - xOffset,
        height - yOffset,
        0,
        0,
        canvasDimension,
        canvasDimension
    ); 
};

img.src = 'http://bluewheelmedia.com/wp-content/uploads/2013/03/PandavsPenguin.jpg';