1

enter image description here

I experimented to place pictures on an allocated coordinate as required, but what I can draw neither shape and angle was matched and corrected, only the top left matches

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() {
    img2Widht = coor['rightTop'][0] - coor['leftTop'][0];
    img2Height = coor['leftBottom'][1] - coor['leftTop'][1];
    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";
  step2();
}

function step2() {
  ctx.drawImage(img2, 92,569,img2Widht,img2Height);
}
* {
  padding: 0;
  margin: 0;
}
html,
body {
  position: relative;
  overflow: hidden;
  height: 100%;
  width:100%;
}
<canvas id="canvas" style="position:absolute;"></canvas>

Can anyone tell me how to draw it with correct angle?

Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
Jason Wong
  • 216
  • 3
  • 14
  • So you want the image's corners to be in the declared positions? Do they form a rectangle or are they just random points? – Bálint Jan 06 '17 at 08:51
  • By the looks of things the image should become skewed a bit. It's may be possible, but it will use a bit of matrix math – Bálint Jan 06 '17 at 08:54
  • 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 06 '17 at 09:19

1 Answers1

0

I post this solution as a temporary one, if I can come up something that rotates the image in the right way then I post it besides this as a new answer.

Using the context's beginPath and lineTo functions you can create a shape:

ctx.beginPath();
ctx.lineTo(coor.leftTop[0], coor.leftTop[1]);
ctx.lineTo(coor.rightTop[0], coor.rightTop[1]);
ctx.lineTo(coor.rightBottom[0], coor.rightBottom[1]);
ctx.lineTo(coor.leftBottom[0], coor.leftBottom[1]);
ctx.closePath();

Then you can create a pattern from the image and set it as the fillstyle

var pattern = ctx.createPatter(img2, "repeat");
ctx.fillStyle = pattern;

Then translate the context so the pattern starts at the right position (thanks for @Kalido fir pointing this out):

ctx.restore();  // set back the context from the previous try
ctx.save();
ctx.translate(coors.leftTop[0], coors.leftTop[1]);

And lastly you can use the pattern to fill the shape:

ctx.fill();
Bálint
  • 4,009
  • 2
  • 16
  • 27
  • Except that patterns apply to the whole context area, not to the Path one... This won't work. – Kaiido Jan 06 '17 at 09:16
  • Then It will just crop the image, and for this there is a `clip` method. – Kaiido Jan 06 '17 at 09:39
  • yeah, the image is croped.. I need to show the whole image without crop.. :( – Jason Jan 06 '17 at 10:01
  • @Jason I said this is just a temporary solution. This question will get closed btw, what kalido posted should solve your problem – Bálint Jan 06 '17 at 10:05