How to redraw modified image using canvas?

1

<canvas id="myCanvas" width="500" height="500"></canvas>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

const image = new Image();
image.src = 'original_image.jpg';

image.onload = function() {
  ctx.drawImage(image, 0, 0); // Draw the image on the canvas
  // Perform modifications to the image (e.g. apply filters, alter colors, etc.)
}

1
2
3
4
5
6

function redrawModifiedImage() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
  ctx.drawImage(image, 0, 0); // Draw the modified image on the canvas
}

// Call redrawModifiedImage function whenever you want to update the canvas with the modified image