JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<input type="range" id="slider" step="0.1" name="points" min="0" max="6.28">
<div>
  <canvas id="reference"></canvas>
  <canvas id="redressement"></canvas>
</div>
<img id="dearSteven" alt=""...

CSS

div{position:absolute;top:80px;;}
  canvas{background-color:grey;float:left;}
  img{display:none;}

JavaScript

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 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 = points.sort(function(p1, p2){
      return parseFloat(p1.y,10) - parseFloat(p2.y,10);
    }).slice(0);

  var mostLeft = roundPoint(pointsX[0]),
    mostRight = roundPoint(pointsX[3]),
    mostTop = roundPoint(pointsY[0]),
    mostBottom = roundPoint(pointsY[3]);
  var result = {}
  result.offsetLeft = mostLeft.x;
  result.offsetTop = mostTop.y;
  result.mostLeft = mostLeft;
  result.width = mostRight.x - mostLeft.x;
  result.height = mostBottom.y - mostTop.y;
  result.size = result.width*result.height*4;
  return...