javascript - Html5 Canvas Transformation Algorithm - Finding object coordinates after applying transformation -

on html5 canvas drawing objects (rectangle, circle, etc...), these objects have transformation properties scale, skew, rotation etc... these objects can nested.

problem occurs when after applying transformations, want find exact x, y coordinate of given object, going on head.

to experts interactive computer graphics; please me solve problem.

thanks in advance.

all affine transformations in 2d can expressed matrix of form:

    [  c  dx ] t = [ b  d  dy ]     [ 0  0   1 ] 

this expressed method context.transform(a, b, c, d, dx, dy);.

when applied coordinate, (x,y), first have add third coordinate, 1: <x, y, 1>. can multiply transformation matrix result:

[ a*x + c*y + dx ] [ b*x + d*y + dy ] [       1        ] 

if other '1' in last coordinate, have divide vector it.

---

to go other way, have invert matrix:

[ d/m  -c/m  (c*dy - d*dx)/m ] [ b/m   a/m  (b*dx - a*dy)/m ] [  0     0          1        ] 

where m (a*d - b*c).

---

multiple transformations applied in sequence, multiplying matrices. order of multiplications 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(θ) , s = math.sin(θ)

---

if got coordinate (x,y) in object-space, , want know end on screen, apply transformation it.

if got coordinate (x,y) on screen, , want know point on object is, multiply inverse of transformation.