Canvas Scale

Last Updated:

How to Scale

ctx.scale() canvas method adds a scaling transformation to the canvas units horizontally and/or vertically.

Your browser does not support the canvas element.

This example draws a scaled rectangle. A non-scaled rectangle is then drawn for comparison.

Help Tips: Learn how to draw a canvas rectange.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas id="point" width="100" height="200"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById('point'); var ctx = canvas.getContext('2d'); // Non-scaled rectangle ctx.fillStyle = 'gray'; ctx.fillRect(20, 10, 8, 20); // Scaled rectangle ctx.scale(3, 6); ctx.fillStyle = '#339933'; ctx.fillRect(20, 10, 8, 20); </script> </body> </html>

Syntax

ctx.scale(x, y)

Attributes Value

ValueExplanation
x Specifies the scaling factor in the horizontal direction. Default value is 1.
y Specifies the scaling factor in the vertical direction. Default value is 1.

Share this Page

Meet the Author