Canvas Scale

You are Here:

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
xSpecifies the scaling factor in the horizontal direction. Default value is 1.
ySpecifies the scaling factor in the vertical direction. Default value is 1.

Reminder

Hi Developers, we almost covered 93% of Canvas Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in Canvas.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author