JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="upload">
<button id="giraresq">Rotate to Left</button>
<button id="girardir">Rotate to Right</button>
<button id="zoomIn">Zoom In</button>
<button id="zoomOut">Zoom Out</button>

<button id="moveUp">Up</button>
<button id="moveDown">Down</button>
<button id="moveLeft">Left</button>
<button id="moveRight">Right</button>
<hr />
<canvas id="canvas" height="300" width="300" data-girar="0"></canvas>
<img src="http://img1.mlstatic.com/carenagem-farol-azul-stx-200-original-sundown-imagem_MLB-O-191117713_594.jpg" id="image"/>

CSS

canvas {
    border:1px solid silver;
}
img {
    display:none;
}

JavaScript

var canvas = document.getElementById('canvas');
var image = document.getElementById('image');
var element = canvas.getContext("2d");
var angleInDegrees = 0;
var zoomDelta = 0.01;
var currentScale = 1;
var currentAngle = 0;
var canvasWidth = 300;
var novosDadosTRBL;
var novosDadosWH;
var novosDadosW;
var novosDadosH;
var startX, startY, isDown = false;

function readURL(input) {
      if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
              $('#image').attr('src', e.target.result);
                        
              element.translate(canvas.width / 2, canvas.height / 2);
              drawImage();
              jQuery('#canvas').attr('data-girar', 0);
          }

          reader.readAsDataURL(input.files[0]);
      }
}


$("#upload").change(function () {
     readURL(this);
});


jQuery('#giraresq').click(function () {
    angleInDegrees = 1;
    currentAngle += angleInDegrees;
    drawImage();
});

jQuery('#girardir').click(function () {
    angleInDegrees = -1;
    currentAngle += angleInDegrees;
    drawImage();
});

jQuery('#zoomIn').click(function () {
    currentScale += zoomDelta;
    drawImage();
});
jQuery('#zoomOut').click(function () {
    currentScale -= zoomDelta;
    drawImage();
});

canvas.onmousedown = function (e) {
    var pos = getMousePos(canvas, e);
    startX = pos.x;
    startY = pos.y;
    isDown = true;
}

canvas.onmousemove = function (e) {
    if (isDown === true) {
        var pos = getMousePos(canvas, e);
        var x = pos.x;
        var y = pos.y;

        element.translate(x - startX, y - startY);
        drawImage();
        
        startX = x;
        startY = y;
    }
}
canvas.onmouseup = function (e) {
    isDown = false;
}

function drawImage() {
    clear();
    element.save();
    element.scale(currentScale, currentScale);
    element.rotate(currentAngle * Math.PI / 180);
    element.drawImage(image, -image.width / 2, -image.width / 2);
   ...