How to detect point on canvas after canvas rotation in HTML5

When working with HTML5 canvas rotation, detecting the correct coordinates of points becomes challenging because the canvas coordinate system changes. This article shows how to create a transform class to handle point detection after canvas rotation.

The Problem

When you rotate a canvas, the coordinate system rotates with it. A point at (5, 6) on the original canvas will have different coordinates after rotation. You need to transform these coordinates to match the rotated canvas.

Creating a Transform Class

Here's a complete Transform class that handles canvas rotations and point transformations:

<canvas id="myCanvas" width="400" height="300"></canvas>

<script>
class Transform {
    constructor() {
        this.m = [1, 0, 0, 1, 0, 0]; // Identity matrix [a, b, c, d, e, f]
    }
    
    // Apply rotation (angle in radians)
    rotate(angle) {
        const cos = Math.cos(angle);
        const sin = Math.sin(angle);
        const m11 = this.m[0] * cos + this.m[2] * sin;
        const m12 = this.m[1] * cos + this.m[3] * sin;
        const m21 = this.m[0] * (-sin) + this.m[2] * cos;
        const m22 = this.m[1] * (-sin) + this.m[3] * cos;
        this.m[0] = m11;
        this.m[1] = m12;
        this.m[2] = m21;
        this.m[3] = m22;
    }
    
    // Transform a point using the current matrix
    transformPoint(x, y) {
        return [
            x * this.m[0] + y * this.m[2] + this.m[4],
            x * this.m[1] + y * this.m[3] + this.m[5]
        ];
    }
}

// Example usage
const t = new Transform();
console.log("Original point:", t.transformPoint(5, 6));

// Rotate by 1 radian (about 57 degrees)
t.rotate(1);
const rotatedPoint = t.transformPoint(5, 6);
console.log("After rotation:", [
    rotatedPoint[0].toFixed(3), 
    rotatedPoint[1].toFixed(3)
]);
</script>

Original point: [5, 6]
After rotation: [-2.347, 7.449]

Canvas Integration Example

Here's how to use the Transform class with actual canvas drawing:

<canvas id="rotatedCanvas" width="400" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById('rotatedCanvas');
const ctx = canvas.getContext('2d');

// Set canvas origin to center for better rotation visualization
ctx.translate(200, 150);

// Create transform instance
const transform = new Transform();

// Draw original point
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(50, 60, 5, 0, 2 * Math.PI);
ctx.fill();

// Apply rotation to both canvas and transform
const rotationAngle = Math.PI / 4; // 45 degrees
ctx.rotate(rotationAngle);
transform.rotate(rotationAngle);

// Get transformed coordinates
const [newX, newY] = transform.transformPoint(50, 60);

// Draw rotated point
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(50, 60, 5, 0, 2 * Math.PI); // Canvas handles the rotation
ctx.fill();

console.log(`Original: (50, 60) ? Transformed: (${newX.toFixed(2)}, ${newY.toFixed(2)})`);
</script>

Original: (50, 60) ? Transformed: (-7.07, 77.78)

Key Points

• The Transform class uses a 2D transformation matrix to track rotations
• Always apply the same transformations to both canvas and Transform instance
• Rotation angles are in radians (multiply degrees by ?/180)
• The transform maintains the cumulative effect of multiple operations

Conclusion

Using a Transform class allows you to accurately detect point coordinates after canvas rotation. Keep the transform synchronized with your canvas transformations for precise coordinate mapping.