How to rotate an image with the canvas HTML5 element from the bottom center angle?

Rotating an image from the bottom center in HTML5 Canvas requires translating the canvas origin to the rotation point, applying the rotation, then drawing the image at an offset position.

Understanding Canvas Rotation

Canvas rotation always occurs around the origin (0,0). To rotate from a specific point like bottom center, we must:

• Translate the canvas to the rotation point
• Apply the rotation
• Draw the image at an adjusted position

Complete Example

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

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

// Create an image
const img = new Image();
img.onload = function() {
    // Clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    // Image dimensions
    const imgWidth = 64;
    const imgHeight = 120;
    
    // Position where we want the bottom center of the image
    const x = 200; // center of canvas
    const y = 200; // vertical position
    
    // Save current state
    context.save();
    
    // Step 1: Translate to rotation point (bottom center of image)
    context.translate(x, y);
    
    // Step 2: Rotate the canvas (45 degrees in this example)
    context.rotate(45 * Math.PI / 180);
    
    // Step 3: Draw image offset so its bottom center aligns with origin
    context.drawImage(img, -imgWidth/2, -imgHeight, imgWidth, imgHeight);
    
    // Restore canvas state
    context.restore();
};

// Set image source (replace with your image URL)
img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgNjQgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iMTIwIiBmaWxsPSIjNDA5NkZGIi8+Cjx0ZXh0IHg9IjMyIiB5PSI2MCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0id2hpdGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiI+SW1hZ2U8L3RleHQ+Cjwvc3ZnPg==';
</script>

Step-by-Step Breakdown

Step 1: Translate to Rotation Point

// Move canvas origin to desired rotation point
context.translate(x, y);

This moves the canvas coordinate system so that (0,0) is now at the bottom center point where we want rotation to occur.

Step 2: Apply Rotation

// Rotate by desired angle (convert degrees to radians)
context.rotate(45 * Math.PI / 180);

Step 3: Draw Image with Offset

// Draw image so its bottom center aligns with the origin
context.drawImage(img, -imgWidth/2, -imgHeight, imgWidth, imgHeight);

The offset -imgWidth/2 centers the image horizontally, and -imgHeight positions it so its bottom edge is at the origin.

Key Points

• Always use context.save() and context.restore() to preserve canvas state
• Convert degrees to radians: degrees * Math.PI / 180
• The drawing offset depends on which point you want as the rotation center
• Translation happens before rotation in the transformation sequence

Conclusion

Rotating images from specific points in Canvas requires translating the coordinate system to that point, rotating, then drawing with appropriate offsets. This technique works for any rotation point by adjusting the translation and drawing coordinates.