How to draw rectangle by given coordinates with skew angle and rotation angle?

Question

the result didn't match the frame perfectly... How can I draw a rect on the canvas stage by given 4 coordinates?

The given coordinates has a little skew angle, I failed to draw it with skew angle, Didn't know how to calculate skew angle with 4 coordinates this is what I can get so far, I can draw it with rotation angle. What else have I missed? you can copy the html code and see the result..

This tells how to calcute the skew angle with triangle, but how to use it in rect..

I'm high school student, my math is not so well, please forgive me ..:(

Thanks..

var _width, _height;
var img = new Image();
var img2 = new Image(),
  img2Widht = 0,
  img2Height = 0;
img.src = "http://production.manboker.com/share/1.jpg";
var canvas = document.getElementById("canvas");
img.onload = function() {
  canvas.width = _width = this.width;
  canvas.height = _height = this.height;
  img2.src = "http://production.manboker.com/share/2.png";
  img2.onload = function() {
    step1();
  }
}

var coor = {
  leftTop: ["92", "569"],
  rightTop: ["672", "569"],
  leftBottom: ["109", "1437"],
  rightBottom: ["723", "1437"]
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function step1() {
  ctx.clearRect(0, 0, _width, _height);
  ctx.globalCompositeOperation = 'source-over';
  ctx.drawImage(img, 0, 0);
  ctx.globalCompositeOperation = "multiply";
  ctx.save();
  ctx.translate(coor['leftTop'][0], coor['leftTop'][1]);
  ctx.rotate(radian(coor['leftTop'], coor['leftBottom']));
  img2Widht = distance(coor['leftTop'], coor['rightTop']);
  img2Height = distance(coor['leftTop'], coor['leftBottom']);
  ctx.drawImage(img2, 0, 0, img2Widht, img2Height);
  ctx.restore();
}

function distance(a, b) {
  var x = b[0] - a[0],
    y = b[1] - a[1];
  return Math.sqrt(x * x + y * y);
}

function radian(a, b) {
  return Math.atan2(a[0] - b[0], b[1] - a[1]);
}

* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

<canvas id="canvas" style="position:absolute;"></canvas>

Either one of your school-mates or one of your other selves already came here with [such a question](http://stackoverflow.com/questions/41500175/how-to-draw-image-by-given-coordinate-on-canvas#comment70210045_41500175). He was told that it is a duplicate of [this](http://stackoverflow.com/questions/36372692/image-manipulation-add-image-with-corners-in-exact-positions) question. Yours also is. — Kaiido, Jan 09 '17 at 07:11
Possible duplicate of [Image Manipulation - add image with corners in exact positions](http://stackoverflow.com/questions/36372692/image-manipulation-add-image-with-corners-in-exact-positions) — Kaiido, Jan 09 '17 at 07:11
Thanks everyone, I found the answer [here](http://stackoverflow.com/questions/10426887/how-to-skew-image-like-this) — Jason, Jan 09 '17 at 07:36

score 0 · Answer 1 · edited May 23 '17 at 11:54

To correctly fit an flat image into a photograph of a frame in 3d, in general you not only need rotation and skewing (or more generaly affine transformations) but instead a projective transformation. Such a transformation is uniquely defined by the images of four points, as long as no three of these lie on a common line. Finding the Transform matrix from 4 projected points (with Javascript) on Math SE and Redraw image from 3d perspective to 2d here on SO are answers where I describe how to do that.

How to draw rectangle by given coordinates with skew angle and rotation angle?

1 Answers1