# How can I transform one triangle into another triangle with HTML5 Canvas? [duplicate]

Given a triangle I'm searching for the canvas transformation to transform it into an other Triangle with the corner coordinates (A,B,C)

Input triangle: Red Triangle: A'=(0,0) B'=(80,80) C'=(0,80)
Output triangle: Triangle with the coordinates A=(10,30), B=(150,110), C=(50,140)
I'm looking for the transformation that transforms the Input triangle into the output triangle where the points A, B and C should be parameters of the transformation.

The code that transforms the red into the green triangle can be found at http://jsfiddle.net/Tarion/mc9mT/ - yet it is obviously wrong because it does not fit the points A,B,C.

What I need is the code or at least the strategy to transform the red triangle it to the triangle that is defined by the given points A,B,C The green triangle is not the solution but just an (almost) arbitrary transformation of the red one.

• Linearly interpolate (lerp) the points of the red triangle to the positions of the green one, and update the canvas every tick. Done. – Engineer May 12 '14 at 13:43
• I don't have the green, the goal is that the green triangle fits the points A,B,C – Tarion May 12 '14 at 13:53
• How much do you know about matrix math in general? – Philipp May 12 '14 at 14:19
• How is this fundamentally different from your other question? gamedev.stackexchange.com/questions/74849/… – MichaelHouse May 12 '14 at 14:20
• @Tarion Er. I think you are missing the point. You DO have the green, since you obviously know the locations of points A, B and C which define the green triangle you wish to create. No? So use them to animate/lerp the points from those of red (let's call these M, N, O) to A, B, C. Then you will have transformed the triangle. You can lerp / animate your colour from red to green at the same time. Clear? – Engineer May 12 '14 at 15:12