如何在图像更改时绘制画布

<canvas id="myCanvas"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var image = new Image();
image.src = "image.jpg";  // 图像路径

image.onload = function() {
  ctx.drawImage(image, 0, 0);  // 绘制图像
};

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText("Hello World", 50, 50);

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
  var red = data[i];
  var green = data[i + 1];
  var blue = data[i + 2];
  // 修改颜色值
  data[i] = red * 0.5;
  data[i + 1] = green * 0.5;
  data[i + 2] = blue * 0.5;
}
ctx.putImageData(imageData, 0, 0);