Html5 Canvas Transformation Algorithm - Finding object coordinates after applying transformation
coordinate-transformation, graphics, html5-canvas, javascript, math
Solution
All affine transformations in 2D can be expressed as a matrix of the form:
[ a c dx ]
T = [ b d dy ]
[ 0 0 1 ]
This could be expressed with the method `context.transform(a, b, c, d, dx, dy);`.
When applied to some coordinate, `(x,y)`, you first have to add a third coordinate, which is always `1`: `<x, y, 1>`. Then you can multiply the transformation matrix to get the result:
[ a*x + c*y + dx ]
[ b*x + d*y + dy ]
[ 1 ]
If you get anything other than '1' in the last coordinate, you have to divide the vector by it.
To go the other way, you have to invert the matrix:
[ d/M -c/M (c*dy - d*dx)/M ]
[ b/M a/M (b*dx - a*dy)/M ]
[ 0 0 1 ]
where `M` is `(a*d - b*c)`.
Multiple transformations could be applied in sequence, by multiplying their matrices. The order of the multiplications are important.
context.translate(dx,dy) <==> context.transform( 1, 0, 0, 1, dx, dy)
context.rotate(θ) <==> context.transform( c, s, -s, c, 0, 0)
context.scale(sx,sy) <==> context.transform(sx, 0, 0, sy, 0, 0)
where `c = Math.cos(θ)` and `s = Math.sin(θ)`
If you got some coordinate `(x,y)` in object-space, and you want to know where it will end up on the screen, you apply the transformation to it.
If you got some coordinate `(x,y)` on the screen, and you want to know which point on the object that is, you multiply by the inverse of the transformation.
Problem
On html5 canvas I am drawing objects (rectangle, circle, etc...), these objects have transformation properties like scale, skew, rotation etc... These objects can be nested. Problem occurs when I after applying transformations, I want to find exact x, y coordinate of given object, but its going over my head. To all experts who is into interactive computer graphics; please help me solve this problem. Thanks in advance.