Html5 Canvas Transformation Algorithm - Finding object coordinates after applying transformation

Question

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.

Selfrealization

Duplicate: #3631094 – Gracie

No this is not duplicate, it is similar to this question (#8845025) but not same . I am looking for similar answer for my queries. But thanks your reference link also helped... – Selfrealization

Answer 1

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.

Gracie

this is somewhat confusing layout of the matrix elements, as setTransform(a,b,c,d,e,f) in the canvas API is laid out: [a, c, e \n b, d, f \n 0 0 1], see developer.mozilla.org/en-US/docs/Web/API/… – Saturn

@TomLarkworthy Thanks. Fixed. – Gracie

What method are you using to get the original coordinate? I am using var rect = canvas.getBoundingClientRect(); var xcoord = (event.clientX - rect.left) * canvas.widht /rect.widht) return newX = xcoord *a + ycoord*c + e but that gives the wrong newX. – Cocksure

Answer 2

Tom Larkworthy's answer is perfect, but with a minor typo. Correct formula to invert the matrix is:

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

Adviser

Answer 3

I was finding myself doing similar searches. Here is the function I wrote to project screen space coordinates to canvas coordinates:

function translateCoordinates(e)
{
    var canvas = document.getElementById('canvas');
    const transform = window.getComputedStyle(canvas).transform;
    const matrix = new DOMMatrixReadOnly(transform);
    const invertedMatrix = matrix.inverse();

    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    const transformedPoint = invertedMatrix.transformPoint({ x: mouseX, y: mouseY });
    const adjustedX = transformedPoint.x;
    const adjustedY = transformedPoint.y;

    return [adjustedX, adjustedY];
}

Pinochle