javascript - lineas - ¿Cómo dibujar la imagen por coordenadas dadas en Canvas?

graficas con canvas html5

Question

Experimenté para colocar imágenes en una coordenada asignada según sea necesario, pero lo que no puedo dibujar ni forma ni ángulo se combinó y corrigió, solo la parte superior izquierda coincide

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>

¿Alguien puede decirme cómo dibujarlo con el ángulo correcto?

Answer 1

Publiqué esta solución como temporal, si puedo encontrar algo que haga girar la imagen de la manera correcta, la publico además como una nueva respuesta.

Usando las funciones contextPath y lineTo del contexto puede crear una forma:

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();

Luego puede crear un patrón a partir de la imagen y configurarlo como el estilo de relleno

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

Luego, traduzca el contexto para que el patrón comience en la posición correcta (gracias por el signo de @Kalido que lo señala):

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

Y, por último, puedes usar el patrón para completar la forma:

ctx.fill();