JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" style="background-color: #eee;" width="600" height="600"></canvas><br />

JavaScript

var degree      = 0;
var scale       = 1;
var minscale    = 1;
var maxscale    = 1.5;
var bool        = true;
var x           = 50;
var y           = 50;
var img         = new Image();
var velocity    = 5;
var ctx;

var start = function(){
    var c = document.getElementById("canvas");
    ctx = c.getContext("2d");


    img.src = "http://de.flash-screen.com/free-wallpaper/uploads/201003/imgs/1269574026.jpg";

    img.onload = function(){
        ctx.clearRect(0,0,c.width,c.height);

        renderSprite(img,x,y,200, 100, 0);
        renderRect(x,y,200,100);

        renderSprite(img,x+300,y, 100,200, 0);
        renderRect(x+300,y,100,200);
        
        renderSprite(img,x,y+300,200, 100, 90);
        renderRect(x,y+300,200,100);

        renderSprite(img,x+300,y+300, 100,200, 90);
        renderRect(x+300,y+300,100,200);
    }
}


var renderSprite = function(img, x, y, width,height, degree, scale){

    var rads = degree * Math.PI/180;
    var heightRatio = height/img.height;
    var widthRatio  = width/img.width;
    
    var isRotated = (degree==90 || degree==270);
    
    if (isRotated) {
        var scale_ratio = height/img.width;
    } else {
        var scale_ratio = heightRatio;									
    }

    var scaledImgHeight = img.height*scale_ratio;
    var scaledImgWidth  = img.width*scale_ratio;
    var offsetX = width - scaledImgWidth;               

    if ((scaledImgHeight) < height) {
        y += parseInt((height-scaledImgHeight)/2);
    }

    if ((scaledImgWidth) < width) {
        x += parseInt((width-scaledImgWidth)/2);
    }	
    
    ctx.save();

    var centerX = x + scaledImgWidth * 0.5;
    var centerY = y + scaledImgHeight * 0.5;
    ctx.translate(centerX, centerY);

    ctx.rotate(rads);
    //ctx.scale(scale,scale);
    ctx.translate(-centerX, -centerY);

    ctx.drawImage(img, x,y, scaledImgWidth ,scaledImgHeight);
    ctx.restore();
};

var renderRect = function(x,y,w,h){
    ctx.save();
    ctx.lineWidth="3";
   ...