JSFiddle - React, Tailwind, and code Playground

HTML

<button id="fit">Fit</button>
<button id="stretch">Stretch</button>
<button id="real">Real</button>
<button id="auto">Auto</button>
<canvas id="myCanvas" width="0" height="0" style="background:#000000;"></canvas>

JavaScript

var imageObj = new Image();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var fitButton = $('#fit');
var stretchButton = $('#stretch');
var realButton = $('#real');
var autoButton = $('#auto');

imageObj.onload = function() {
    auto();
};

imageObj.src = "https://sphotos-b.xx.fbcdn.net/hphotos-ash3/546046_524375820938862_2058872261_n.jpg";

function fit() {
    var scaleX, scaleY, scale;
    var scaledWidth, scaledHeight;

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

    scaleX = imageObj.width / canvas.width;
    scaleY = imageObj.height / canvas.height;
    scale = scaleX > scaleY ? scaleX : scaleY;

    scaledWidth = imageObj.width / scale;
    scaledHeight = imageObj.height / scale;

    context.clearRect();
    context.drawImage(imageObj, (canvas.width - scaledWidth) / 2, (canvas.height - scaledHeight) / 2, scaledWidth, scaledHeight);

}

function stretch() {
    canvas.width = 400;
    canvas.height = 400;

    context.clearRect();
    context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
}

function real() {
    canvas.width = 400;
    canvas.height = 400;

    context.clearRect();
    context.drawImage(imageObj, 0, 0);
}

function auto() {
    canvas.width = imageObj.width;
    canvas.height = imageObj.height;

    context.clearRect();
    context.drawImage(imageObj, 0, 0);
}



fitButton.click(fit);
stretchButton.click(stretch);
realButton.click(real);
autoButton.click(auto);