YouTip

## HTML Canvas `rotate()` Method The `rotate()` method of the Canvas 2D API rotates the current drawing context. Understanding how rotation works in HTML5 Canvas is crucial: **the rotation is applied to the canvas coordinate system itself, not to the individual drawn shapes.** Any shapes drawn after calling `rotate()` will be rotated around the current transformation origin (which is `(0,0)` by default). --- ## Browser Support The `rotate()` method is widely supported across all modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer 9+ * Safari * Opera *Note: Internet Explorer 8 and earlier versions do not support the `` element.* --- ## Syntax and Parameters ### JavaScript Syntax ```javascript context.rotate(angle); ``` ### Parameter Values | Parameter | Type | Description | | :--- | :--- | :--- | | `angle` | Number | The rotation angle in **radians** clockwise. | ### Working with Radians The `rotate()` method accepts angles in radians, not degrees. To convert degrees to radians, use the following formula: $$\text{radians} = \frac{\text{degrees} \times \pi}{180}$$ In JavaScript, this is written as: ```javascript let radians = degrees * Math.PI / 180; ``` * **Example:** To rotate by $20^\circ$ clockwise, use `20 * Math.PI / 180`. * **Example:** To rotate by $90^\circ$ clockwise, use `90 * Math.PI / 180` (or `Math.PI / 2`). --- ## Code Examples ### Example 1: Basic Rotation This example demonstrates how to rotate a rectangle by 20 degrees. ```html Your browser does not support the HTML5 canvas tag. ``` --- ## Advanced Usage: Rotating Around a Specific Point By default, the rotation origin is always the top-left corner of the canvas `(0,0)`. If you want to rotate a shape around its own center, you must combine `rotate()` with the `translate()` method. ### The Translate-Rotate-Translate Pattern To rotate an object around its center point `(x, y)`: 1. **Translate** the canvas origin to the center of the shape: `ctx.translate(x, y)` 2. **Rotate** the canvas: `ctx.rotate(angle)` 3. **Draw** the shape centered at `(0, 0)` (i.e., offset by half of its width and height: `draw(-width/2, -height/2)`). ### Example: Rotating a Rectangle Around Its Center ```javascript const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); const rectWidth = 100; const rectHeight = 50; const rectX = 150; // Target X center const rectY = 75; // Target Y center const angle = 45 * Math.PI / 180; // 45 degrees // Step 1: Move origin to the center of the shape ctx.translate(rectX, rectY); // Step 2: Rotate the coordinate system ctx.rotate(angle); // Step 3: Draw the rectangle offset so its center aligns with the new (0,0) ctx.fillStyle = "blue"; ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); ``` --- ## Key Considerations & Best Practices * **Cumulative Transformations:** Transformations in Canvas are cumulative. If you call `ctx.rotate(20 * Math.PI / 180)` twice, the total rotation will be 40 degrees. * **Restoring State:** To prevent rotation from affecting subsequent drawings, wrap your transformation code between `ctx.save()` and `ctx.restore()`. ```javascript ctx.save(); // Save the current clean state ctx.translate(100, 100); ctx.rotate(Math.PI / 4); ctx.fillRect(-25, -25, 50, 50); // Draw rotated square ctx.restore(); // Restore state (removes the translation and rotation) // Any shapes drawn here will not be rotated ``` * **Order of Operations:** The order of transformations matters. `ctx.translate(x, y)` followed by `ctx.rotate(a)` produces a completely different visual result than `ctx.rotate(a)` followed by `ctx.translate(x, y)`. Always translate first when rotating objects in place.