Canvas Scale

Posted in Canvas Tutorial

Updated on May 19, 2024

By Mari Selvan

👁️ 160 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The HTML5 Canvas API provides a powerful way to create and manipulate 2D graphics on the web. One of the essential features of this API is the ability to scale drawings, allowing developers to resize graphics dynamically. This capability is crucial for creating responsive designs and animations.

In this guide, we'll explore how to use the scale() method in the Canvas API to adjust the size of your drawings.

💡 Syntax

The scale() method is used to scale the drawing context by a given factor horizontally and vertically. The syntax is straightforward:

Syntax

Copied

context.scale(scaleWidth, scaleHeight);

🧰 Attributes

scaleWidth: A double representing the scaling factor in the horizontal direction. A value of 1 leaves the width unchanged, values greater than 1 increase the width, and values between 0 and 1 decrease the width.
scaleHeight: A double representing the scaling factor in the vertical direction. Similarly, a value of 1 leaves the height unchanged, values greater than 1 increase the height, and values between 0 and 1 decrease the height.

📄 Example

Let's illustrate how to use the scale() method with a simple example. We'll draw two rectangles, one scaled and one not, to demonstrate the effect of scaling.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Scale Example</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>

  <script>
    const canvas = document.getElementById('myCanvas');
    const context = canvas.getContext('2d');

    // Draw a rectangle without scaling
    context.fillStyle = 'blue';
    context.fillRect(50, 50, 100, 50);

    // Scale the context
    context.scale(2, 2);

    // Draw a rectangle after scaling
    context.fillStyle = 'red';
    context.fillRect(50, 150, 100, 50);
  </script>
</body>
</html>

🧠 How it works?

In this example, the blue rectangle is drawn first without any scaling applied. After scaling the context by a factor of 2 horizontally and vertically, the red rectangle is drawn. The red rectangle appears twice as wide and twice as tall as the blue one due to the scaling.

🎉 Conclusion

Using the scale() method in the Canvas API allows you to dynamically resize your graphics, making it a powerful tool for creating responsive and scalable designs.

By mastering this method, you can enhance the flexibility and visual appeal of your canvas-based projects.