JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Dialog-information_on.svg/50px-Dialog-information_on.svg.png" class="icono" id="mycanvas" />

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Dialog-information_on.svg/50px-Dialog-information_on.svg.png" class="icono" id="mycanvas" />


<canvas width=50 height=50></canvas>

CSS

canvas {
position: absolute;
top: 0; 
left: 0;
-webkit-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
 
canvas:hover {
opacity: 0;
}

    
.icono{
width:50px;
height:50px;
}

JavaScript

(function() {
         var supportsCanvas = !!document.createElement('canvas').getContext;
         supportsCanvas && (window.onload = greyImages);
 
         function greyImages() {
            var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'),
            img = document.getElementById('mycanvas'),
            imageData, px, length, i = 0,
            red, green, blue, grey;
 
            ctx.drawImage(img, 0, 0);
 
            imageData = ctx.getImageData(0, 0, 640, 400);
            px = imageData.data;
            length = px.length;
 
            for ( ; i < length; i+= 4 ) {
               // rgba
               grey = 0.3*px[i] + 0.59*px[i+1] + 0.11*px[i+2];
               px[i] = px[i+1] = px[i+2] = grey;
            }
 
            ctx.putImageData(imageData, 0, 0);
         }
      })();