JSFiddle - React, Tailwind, and code Playground

HTML

<button id="resize">Rotate with resizing canvas</button>
<button id="zoomIn">zoomIn</button>
<button id="zoomOut">zoomOut</button>
<div id="containerDiv">
    <canvas id="canvas" width=400 height=400></canvas>
</div>

CSS

#containerDiv {
    border: 1px solid red;
    position:absolute;
    top:130px;
    left:100px;
    
}

JavaScript

var zoomDelta = 0.1;
 var currentScale = 1;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var imgWidth = 200;
var imgHeight = 300;
var size = {
    width: imgWidth,
    height: imgHeight
};
var rotation = 0;
var deg2Rad = Math.PI / 180;
var count1 = 0;
var count2 = 0;

var img = new Image();
img.onload = function () {
    imgWidth = img.width;
    imgHeight = img.height;
    size = {
        width: imgWidth,
        height: imgHeight
    };
    draw();
}
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/Rotate.png";

function draw() {
    canvas.width = size.width;
    canvas.height = size.height;

    // calculate the centerpoint of the canvas
    var cx = canvas.width / 2;
    var cy = canvas.height / 2;
   
    // draw the rect in the center of the newly sized canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "rgba(216,216,150,1.0)";
    ctx.translate(cx, cy);
    ctx.scale(currentScale, currentScale);
    ctx.rotate(rotation * deg2Rad);
    ctx.drawImage(img, -imgWidth / 2, -imgHeight / 2);
}


document.getElementById("resize").addEventListener("click", resizeClicked, false);
document.getElementById("zoomIn").addEventListener("click", zoomIn, false);
document.getElementById("zoomOut").addEventListener("click", zoomOUt, false);
function resizeClicked(e) {
    rotation += 45;
    newSize(imgWidth, imgHeight, rotation);
    draw();
}
function zoomIn(e) {
       currentScale += zoomDelta;
      draw();
      newSize(imgWidth, imgHeight, rotation);
}
function zoomOUt(e) {
       currentScale -= zoomDelta;
      draw();
      newSize(imgWidth, imgHeight, rotation);
}

function newSize(w, h, a) {
    var rads = a * Math.PI / 180;
    var c = Math.cos(rads);
    var s = Math.sin(rads);
    if (s < 0) {
        s = -s;
    }
    if (c < 0) {
        c = -c;
    }
    size.width = h * s + w * c;
    size.height = h * c + w * s;
}