<style> 
      .img-wrap {
         width: 640px;
         margin: 100px auto;
         position: relative;
         cursor: pointer;
      }
 
      canvas {
         position: absolute;
         top: 0; left: 0;
         -webkit-transition: all 1s;
         -ms-transition: all 1s;
         -o-transition: all 1s;
         -moz-transition: all 1s;
         transition: all 1s;
      }
 
      canvas:hover {
         opacity: 0;
      }
 
      /* If you MUST have IE support */
      #cvs-src {
         filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      }
   </style>

 <script> 
      (function() {
         var supportsCanvas = !!document.createElement('canvas').getContext;
         supportsCanvas && (window.onload = greyImages);
 
         function greyImages() {
            var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'),
            img = document.getElementById('cvs-src'),
            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 ) {
               // rgbargbargbargba
               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);
         }
      })(); 
   </script>

   <div class="img-wrap"> 
 
      <img src="imagen.jpg" alt="Imagen" id="cvs-src" /> 
      <canvas width=640 height=400></canvas> 
   </div>