YouTip

## HTML Canvas scale() Method The `scale()` method of the Canvas 2D API scales the current drawing context by applying a scaling transformation horizontally and vertically. By default, one unit on the canvas corresponds to exactly one pixel. A scaling transformation modifies this internal coordinate system, causing subsequent shapes and paths to be drawn larger or smaller. --- ## Syntax ```javascript context.scale(scaleWidth, scaleHeight); ``` ### Parameter Values | Parameter | Type | Description | | :--- | :--- | :--- | | `scaleWidth` | Number | Scaling factor in the horizontal direction (X-axis).
• `1.0` = no scaling (100%)
• `0.5` = shrink to 50%
• `2.0` = stretch to 200%
• Negative values flip the pixels horizontally. | | `scaleHeight` | Number | Scaling factor in the vertical direction (Y-axis).
• `1.0` = no scaling (100%)
• `0.5` = shrink to 50%
• `2.0` = stretch to 200%
• Negative values flip the pixels vertically. | --- ## Key Considerations & How It Works Before using the `scale()` method, it is crucial to understand how transformations accumulate and affect your canvas: 1. **Cumulative Transformation Matrix:** The `scale()` method modifies the current transformation matrix. If you call `scale(2, 2)` and then call `scale(2, 2)` again, the subsequent drawings will be scaled by a factor of **4** ($2 \times 2$). 2. **Coordinate System Scaling:** `scale()` does not just scale the size of the shapes; **it scales the entire coordinate system**. This means the origin coordinates, line widths, and positions of your drawings are scaled as well. For example, if you scale by `(2, 2)`, a shape positioned at `(5, 5)` will be rendered at `(10, 10)`. 3. **Line Width Scaling:** When you scale the canvas, the stroke thickness (`lineWidth`) is also scaled. If `lineWidth` is set to `1` and you scale by `2`, the rendered line will appear `2` pixels wide. 4. **Resetting Scale:** To prevent scaling from affecting future drawings, you can save the canvas state before scaling using `context.save()` and restore it afterward using `context.restore()`. Alternatively, you can reset the transformation matrix using `context.setTransform(1, 0, 0, 1, 0, 0)`. --- ## Code Examples ### Example 1: Basic Scaling This example draws a standard rectangle, scales the context by 200% in both directions, and then draws the exact same rectangle. Notice how both the size and the position of the second rectangle are doubled. ```html Your browser does not support the HTML5 canvas tag. ``` --- ### Example 2: Cumulative Scaling Effect This example demonstrates how multiple `scale()` calls multiply together. Each subsequent rectangle is drawn after applying an additional `scale(2, 2)` transformation. ```html Your browser does not support the HTML5 canvas tag. ``` --- ### Example 3: Flipping Drawings (Mirroring) You can pass negative values to `scale()` to flip the coordinate system horizontally or vertically. This is highly useful for mirroring images or creating symmetrical graphics. ```javascript // Flip horizontally (mirror along the Y-axis) ctx.scale(-1, 1); // Note: Since the X-axis is now flipped, positive X coordinates // will draw off-screen to the left. You must translate the origin // to see the flipped drawing. ctx.translate(-canvas.width, 0); ``` --- ## Browser Support The `scale()` method is fully supported by all modern browsers: | Chrome | Edge | Firefox | Safari | Opera | Internet Explorer | | :---: | :---: | :---: | :---: | :---: | :---: | | Yes | Yes | Yes | Yes | Yes | 9.0+ | *Note: Internet Explorer 8 and earlier versions do not support the `` element.*