JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<canvas id="reference" width="618" height="364"></canvas>
<canvas id="redressement" width="618" height="364"></canvas>
<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, angle){
  var center = getRectangleCenter(rectangle),
    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 rotateImage(ctx, angle, width, height){
  var myData = ctx.getImageData(0, 0, width, height),
    outData = Array(myData.data.length),
    center = getRectangleCenter(_rectangle);

  for(var i = 0; i < outData.length; i+=4){
    var coord = indexToCoord(i, width, height),
      pixel = rotatePoint(center, angle, coord);
    pixel.x = Math.round(pixel.x);
    pixel.y =...