JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="300" height="300" id="canvas" ></canvas>

CSS

canvas{
    border: solid black 1px;
}

JavaScript

var canvas = document.getElementById('canvas');       
	var context = canvas.getContext('2d');  

var image = new Image();
    image.onload = function () {
      if (image.width != canvas.width)
        canvas.width = image.width;
      if (image.height != canvas.height)
        canvas.height = image.height;
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(image, 0, 0, canvas.width, canvas.height);
      var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      filter(imageData);
      context.putImageData(imageData, 0, 0);
    }
    image.src = "http://i0.gmx.net/images/302/17520302,pd=2,h=192,mxh=600,mxw=800,w=300.jpg";
  
function filter(imageData){
     var d = imageData.data;
    for (var i = 0; i < d.length; i += 4) {
      var r = d[i];
      var g = d[i + 1];
      var b = d[i + 2];
      d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;
    }
    return imageData;
}