JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div>
  <canvas id="reference" width="618" height="364"></canvas>
  <canvas id="redressement" width="618" height="364"></canvas>
</div>
<br/>
<input type="text" />
<input id="rotateButton" type="button" value="rotate"/>
<img id="dearSteven" alt=""...

CSS

canvas{background-color:grey;}
  img{display:none;}

JavaScript

var _rectangleWidth = 120,
  _rectangleHeight = 150,
  _angle = Math.PI/6,
  _rectangle = [
  {x:200, y:120},
  {x:200, y:120+_rectangleHeight},
  {x:200+_rectangleWidth, y:120+_rectangleHeight},
  {x:200+_rectangleWidth, y:120}
  ],
  refNode,
  resultNode,
  _imageObj,
  ctxRef,
  ctxRes;
function getRectangleCenter(rectangle){
  return {x:(rectangle[0].x+rectangle[2].x)/2,y:(rectangle[0].y+rectangle[2].y)/2};
}
function plotRectangle(ctx, rectangle, opts){
  ctx.beginPath();
  var points = rectangle;
  ctx.moveTo(points[0].x, points[0].y);
  for(var i=1; i<points.length; ++i){
    var point = points[i];
    ctx.lineTo(point.x, point.y);
  }
  ctx.lineTo(points[0].x, points[0].y);
  ctx.strokeStyle = opts && opts.color||'blue';
  ctx.stroke();
  ctx.closePath();
}
function rotatePoint(center, angle, point){
  var offset = {x:point.x - center.x, y:point.y - center.y},
    res = {},
    a=Math.cos(angle),
    b=Math.sin(angle);
  res.x = a*offset.x -b*offset.y + center.x;
  res.y = b*offset.x +a*offset.y + center.y;
  return res;
}
function rotateRectangle(rectangle, center, angle){
  var points = rectangle.map(function(p){
      return rotatePoint(center, angle, p);
  });
  return points;
}
function createImageData(width, height){
  var canvas = document.createElement('canvas');
  return canvas.getContext('2d').createImageData(width, height);
}
function indexToCoord(z, width, height){
  z=z/4;
  return {
    x:z%width,
    y:Math.round(z - z%width)/width
  }
}
function coordToIndex(coord, width, height){
  return (coord.x + coord.y * width) * 4;
}
function roundPoint(p){
  return {
    x:Math.floor(p.x),
    y:Math.floor(p.y)
  }
}
function getBounding(canvas, center, angle){
  var points = rotateRectangle([{x:0,y:0},{x:canvas.width,y:0},{x:canvas.width,y:canvas.height},{x:0, y:canvas.height}], center, angle);
  var pointsX = points.sort(function(p1, p2){
      return parseFloat(p1.x,10) - parseFloat(p2.x,10);
    }).slice(0)
  var pointsY =...