JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<img id="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt=""> 
 
 <canvas id="canvas"></canvas>

CSS

body {
  padding: 50px;
}

img {
  filter: grayscale(100%) contrast(100);
  width: 200px;
  height: 200px;
}

JavaScript

function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  const img = document.getElementById('img');
  img.crossOrigin = "";
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
  var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
  var data = imageData.data;
    
  var invert = function() {
    for (var i = 0; i < data.length; i += 4) {
      data[i]     = 225 - data[i];     // red
      data[i + 1] = 225 - data[i + 1]; // green
      data[i + 2] = 225 - data[i + 2]; // blue
    }
    ctx.putImageData(imageData, 0, 0);
  };

  var grayscale = function() {
    for (var i = 0; i < data.length; i += 4) {
      var 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);
  };

  var invertbtn = document.getElementById('invertbtn');
  invertbtn.addEventListener('click', invert);
  var grayscalebtn = document.getElementById('grayscalebtn');
  grayscalebtn.addEventListener('click', grayscale);
}

draw()