Canvas Scale
How to Scale
ctx.scale() canvas method adds a scaling transformation to the canvas units horizontally and/or vertically.
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
| Value | Explanation |
|---|---|
| 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. |
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.