How to make an image b/w?

Question

JavaScript

I have a color image in the storage (localStorage.getItem('saveImage')) and I need to take a photo from the storage and make it black and white.

In the example localStorage.getItem('saveImage') THIS is " https://images.unsplash.com/photo-1568097379042-34... "

function drawImageOnCanvas(size, reduct, reductPixel) {
  canvas.width = size;
  canvas.height = size;
  
  const colorImage = localStorage.getItem('saveImage'); <---------------- цветное изображение
  const img = new Image();
  img.crossOrigin = 'Anonymous';
  img.src = ЗДЕСЬ ЛИНК ДОЛЖЕН БЫТЬ НА ЧЕРНО-БЕЛОЕ ИЗОБРАЖЕНИЕ
  img.onload = () => {
      ctx.drawImage(img, 0, 0, size, size);
  };
  canvasSize = size;
  reductionNumber = reduct;
  reductionPixelNumber = reductPixel;
}

How can I make it black and white, save it to local storage and put it on canvas?

Answer 1

function drawImageOnCanvas(size, reduct, reductPixel) {
  canvas.width = size;
  canvas.height = size;
  
  const colorImage = localStorage.getItem('saveImage');/// <---------------- цветное изображение
      ctx.drawImage(colorImage, 0, 0, size, size);
      ctx.globalCompositeOperation='color';
      ctx.fillStyle = "white";
      ctx.globalAlpha = 1;
      ctx.fillRect(0, 0, size,size);

  canvasSize = size;
  reductionNumber = reduct;
  reductionPixelNumber = reductPixel;
}