How do I rotate a single object on an html 5 canvas?

In the HTML <canvas> element, to rotate an object, we typically use the rotate() function from the Canvas 2D API. This function rotates the coordinate system on the canvas to achieve object rotation. Here is a step-by-step guide and example:

Steps

1. Get the Canvas Context: First, obtain the 2D rendering context of the canvas element to enable drawing functions.
2. Save the Current Canvas State: Use the save() method to save the current canvas state (including previous transformations), allowing you to restore it later.
3. Position to the Object's Center: Use the translate() method to shift the canvas origin to the center of the object you wish to rotate. By default, rotation occurs around the origin.
4. Perform Rotation: Call the rotate() method with the rotation angle in radians. If using degrees, convert to radians using angle * Math.PI / 180.
5. Draw the Object: Draw the object in the rotated coordinate system. Since the origin has been moved, you may need to adjust the object's position.
6. Restore the Canvas State: After drawing, call restore() to revert to the previously saved canvas state, undoing the rotation and translation.

Example Code

javascript
function drawRotatedRect(canvas, angle, rectX, rectY, rectWidth, rectHeight) {
    const ctx = canvas.getContext('2d');
    
    // Save current state
    ctx.save();
    
    // Move to rectangle center
    ctx.translate(rectX + rectWidth / 2, rectY + rectHeight / 2);
    
    // Rotate canvas
    ctx.rotate(angle * Math.PI / 180);
    
    // Draw rectangle (in the rotated and translated coordinate system)
    ctx.fillStyle = 'blue';
    ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
    
    // Restore to pre-rotation state
    ctx.restore();
}

// Usage example
const canvas = document.getElementById('myCanvas');
drawRotatedRect(canvas, 45, 100, 100, 100, 50);

In this example, a rectangle is rotated 45 degrees around its center on the canvas. First, we move the canvas origin to the rectangle's center using translate(), then rotate the canvas with rotate(), draw the rectangle, and finally restore the canvas state to ensure other elements remain unaffected.