Canvas Manipulating Images

Posted in Canvas Tutorial

Updated on May 19, 2024

By Mari Selvan

👁️ 78 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

Canvas, a powerful HTML5 element, provides a platform for dynamic rendering and manipulation of graphics, including images. With Canvas, developers can perform various operations on images, such as scaling, rotating, and applying filters, directly within the browser.

In this guide, we'll explore how to manipulate images on the Canvas element.

💡 Syntax

To work with images on the Canvas, you first need to load the image onto the canvas using JavaScript. Here's a basic outline of the syntax:

Syntax

Copied

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  ctx.drawImage(img, x, y, width, height);
}

img.src = 'image.jpg';

🛠️ Operations

Scaling:

You can resize an image on the canvas using the drawImage() method. Adjust the width and height parameters to scale the image:
example.js
Copied
```
ctx.drawImage(img, x, y, width, height);
```

Rotation:

To rotate an image on the canvas, use the rotate() method along with drawImage():

example.js

Copied

ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 180 * degrees);
ctx.drawImage(img, -img.width / 2, -img.height / 2);

Filters:

Applying filters to images on the canvas involves manipulating pixel data. Here's an example of applying a grayscale filter:

example.js

Copied

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

for (let i = 0; i < data.length; i += 4) {
  const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
  data[i] = avg; // Red
  data[i + 1] = avg; // Green
  data[i + 2] = avg; // Blue
}

ctx.putImageData(imageData, 0, 0);

📄 Example

Let's put it all together with a simple example:

index.html

Copied

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();

  img.onload = function() {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    // Apply grayscale filter
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      data[i] = avg; // Red
      data[i + 1] = avg; // Green
      data[i + 2] = avg; // Blue
    }
    ctx.putImageData(imageData, 0, 0);
  }

  img.src = 'image.jpg';
</script>

🎉 Conclusion

Canvas provides a versatile platform for manipulating images directly within the browser, offering developers the ability to scale, rotate, and apply various effects to images dynamically

By understanding the syntax and operations available, you can create engaging visual experiences for your web applications.