javascript - Skew, size and rotate a rectangle to fit triangle perfectly -

i'm trying make half of rectangle - devided diagonally - fit inside triangle. rotation works well, sizing of rectangle. once try skew it, gets messed up. want simulate 3d surface.

that means have find angle of abc, b center point. , apply angle skew rectangle. reason doesn't work intended.

here simple illustration of want accomplish:

you understand more once take @ fiddle: http://jsfiddle.net/p7g7y/11/ edit: got width right @ least: http://jsfiddle.net/p7g7y/12/

the piece of code need @ at line 63 - 95. try comment out transform, , see rotation , size works well.

function triangle(a, b, c){  context.save();  //draw 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 distance between , b set height of image var imgheight = linedistance(a, b);  //and width b c var imgwidth = linedistance(b, c);  //now gotta skew acording rad between ba , bc var skewangle = find_angle(a,c,b); //find angle , make rad  //find angle of b 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 rotate more 1.57079633 = 90deg context.transform(1, skewangle, 0, 1, 0, 0);  context.rect( 0, 0, imgheight, imgwidth); context.stroke();  context.restore(); } 

if unclear, please ask! love on this!

it's easier if solve problem more generally: find a, b, c, d, e , f that

  // (x0, y0) maps (x_0, y_0)   a*x0 + b*y0 + c = x_0   d*x0 + e*y0 + f = y_0    // (x1, y1) maps (x_1, y_1)   a*x1 + b*y1 + c = x_1   d*x1 + e*y1 + f = y_1    // (x2, y2) maps (x_2, y_2)   a*x2 + b*y2 + c = x_2   d*x2 + e*y2 + f = y_2 

this 6x6 linear system composed of 2 independent 3x3 linear systems:

  a*x0 + b*y0 + c = x_0   a*x1 + b*y1 + c = x_1   a*x2 + b*y2 + c = x_2    d*x0 + e*y0 + f = y_0   d*x1 + e*y1 + f = y_1   d*x2 + e*y2 + f = y_2 

solving them gives 6 numbers pass settransform map 3 points other 3 points.

delta = x0*y1 + y0*x2 + x1*y2 - y1*x2 - y0*x1 - x0*y2  delta_a = x_0*y1 + y0*x_2 + x_1*y2 - y1*x_2 - y0*x_1 - x_0*y2 delta_b = x0*x_1 + x_0*x2 + x1*x_2 - x_1*x2 - x_0*x1 - x0*x_2 delta_c = x0*y1*x_2 + y0*x_1*x2 + x_0*x1*y2 - x_0*y1*x2 - y0*x1*x_2 - x0*x_1*y2  delta_d = y_0*y1 + y0*y_2 + y_1*y2 - y1*y_2 - y0*y_1 - y_0*y2 delta_e = x0*y_1 + y_0*x2 + x1*y_2 - y_1*x2 - y_0*x1 - x0*y_2 delta_f = x0*y1*y_2 + y0*y_1*x2 + y_0*x1*y2 - y_0*y1*x2 - y0*x1*y_2 - x0*y_1*y2  = delta_a / delta b = delta_b / delta c = delta_c / delta d = delta_d / delta e = delta_e / delta f = delta_f / delta 

for full description of 3d texture mapping using 2d canvas context see this more detailed answer.