title: Skew, size and rotate a rectangle to fit triangle perfectly
body: <p>I'm trying to make half of a rectangle - devided diagonally - to fit inside a triangle.
  Rotation works well, so does sizing of the rectangle. But once I try to skew it, it all gets messed up. Basically I want to simulate a 3D surface. </p>
  
  <p>That means I have to find the angle of abc, where b is the center point. And then apply this angle as a skew to the rectangle. But for some reason that doesn't work as intended. </p>
  
  <p>Here is a simple illustration of what I want to accomplish:</p>
  
  <p><img src="https://i.stack.imgur.com/rIKs3.jpg" alt="enter image description here"></p>
  
  <p>You will probably understand more once you take a look at the fiddle: <a href="http://jsfiddle.net/p7g7Y/11/" rel="nofollow noreferrer">http://jsfiddle.net/p7g7Y/11/</a>
  EDIT: Got the width right at least: <a href="http://jsfiddle.net/p7g7Y/12/" rel="nofollow noreferrer">http://jsfiddle.net/p7g7Y/12/</a></p>
  
  <p>The piece of code you need to look at is at line 63 - 95.
  Try comment out the transform, and you will see that rotation and size works well. </p>
  
  <pre><code>function triangle(a, b, c){
  
  context.save();
  
  //Draw the triangle
  context.beginPath();
  context.moveTo(a[0], a[1]);
  context.lineTo(b[0], b[1]);
  context.lineTo(c[0], c[1]);
  context.lineTo(a[0], a[1]);
  context.closePath();
  context.stroke();
  
  //Lets find the distance between a and b to set height of the image
  var imgHeight = lineDistance(a, b);
  
  //And the width b to c
  var imgWidth = lineDistance(b, c);
  
  //Now we gotta skew it acording to the rad between ba and bc
  var skewAngle = find_angle(a,c,b); //Find angle and make it rad
  
  //Find the angle of b to a line
  var theta = Math.atan2(a[1] - b[1], a[0] - b[0]);
  context.translate(a[0], a[1]); //Set origin of rotation
  context.rotate(theta + 1.57079633); //Had to rotate it some more 1.57079633 = 90deg
  context.transform(1, skewAngle, 0, 1, 0, 0);
  
  context.rect( 0, 0, imgHeight, imgWidth);
  context.stroke();
  
  context.restore();
  }
  </code></pre>
  
  <p>If anything is unclear, please ask! I would love some help on this!</p>