How to convert an image in canvas to black and white?

Question

JavaScript

There is a code: https://jsfiddle.net/dm68vjoh/1/
When you click on the Load button, an image is loaded onto the canvas.
Then I want to convert this image to black and white using this code:

var imgd = context.getImageData(0, 0, 500, 300);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
var grayscale = pix[i ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
pix[i ] = grayscale; // red
pix[i+1] = grayscale; // green
pix[i+2] = grayscale; // blue
// alpha
}
context.putImageData(imgd, 0, 0);

Original code for converting to black and white
But first I want to display ImageData from canvas
But when I click on the B&W button, I get an error:

The code that causes the error:

bAndWButton.addEventListener('click', () => {
 let context = canvas.getContext("2d");
 console.log(context.getImageData(0,0, imageWidth, imageHeight));
});

Tell me how to solve this problem
PS for example, I have a static image, but I use the fetch API
that is in the example:

loadBtn.addEventListener('click', () => {
  if (canvas.getContext) {
    let ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    let pic = new Image();
    pic.src = 'http://www.heliotrope-online.com/wp-content/uploads/2019/07/gerard_luthi-400x500.jpg';
    pic.onload = () => {
      imageWidth = pic.width;
      imageHeight = pic.height;
      if (pic.width === pic.height) {
          imageWidth = 128;
          imageHeight= 128;
          ctx.drawImage(pic, 0, 0, 128, 128);
        }
      if (pic.width < pic.height) {
        imageWidth = (pic.width * 128) / pic.height;
        imageHeight= 128;
          ctx.drawImage(pic, (128 - (pic.width * 128) / pic.height) / 2,
            0, (pic.width * 128) / pic.height, 128);
        }
      if (pic.width > pic.height) {
        imageWidth = 128;
        imageHeight= (pic.height * 128) / pic.width;
          ctx.drawImage(pic, 0, (128 - (pic.height * 128) / pic.width) / 2,
            128, (pic.height * 128) / pic.width);
        }
    }
  }
});

bAndWButton.addEventListener('click', () => {
 let context = canvas.getContext("2d");
 console.log(context.getImageData(0,0, imageWidth, imageHeight));
});

And here's what I use:

loadBtn.addEventListener('click', () => {
const url = `https://api.unsplash.com/photos/random?query=town,Moscow&client_id=код для запроса`;
fetch(url)
  .then(res => res.json())
  .then(data => data.urls.small)
  .then(image => {
      if (canvas.getContext) {
        let ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = false;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        let pic = new Image();
        pic.src = image;
        pic.onload = () => {
          imageWidth = pic.width;
          imageHeight = pic.height;
          if (pic.width === pic.height) {
              imageWidth = 128;
              imageHeight= 128;
              ctx.drawImage(pic, 0, 0, 128, 128);
            }
          if (pic.width < pic.height) {
            imageWidth = (pic.width * 128) / pic.height;
            imageHeight= 128;
              ctx.drawImage(pic, (128 - (pic.width * 128) / pic.height) / 2,
                0, (pic.width * 128) / pic.height, 128);
            }
          if (pic.width > pic.height) {
            imageWidth = 128;
            imageHeight= (pic.height * 128) / pic.width;
              ctx.drawImage(pic, 0, (128 - (pic.height * 128) / pic.width) / 2,
                128, (pic.height * 128) / pic.width);
            }
        }
  })
}
});

Answer 1

The keywords in the error message are "cross-origin data".
This is a standard and repeatedly described problem. I've also been to the toaster several times.
Just google "canvas cross-origin".