# Need help with HTML5 Canvas Black&White Image Effect

**URL:** <https://forum.kirupa.com/t/need-help-with-html5-canvas-black-white-image-effect/325812>\
**Category:** web dev\
**Created:** [November 6, 2011, 1:49am UTC](https://forum.kirupa.com/t/need-help-with-html5-canvas-black-white-image-effect/325812 "2011-11-06T01:49:50Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daimz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/daimz/32/2383_2.png) [@Daimz](https://forum.kirupa.com/u/Daimz)\
**Post date:** [November 6, 2011, 1:49am UTC](https://forum.kirupa.com/t/need-help-with-html5-canvas-black-white-image-effect/325812/1 "2011-11-06T01:49:50Z")

</div>

[LEFT][COLOR=#000000][FONT=Arial]I am trying to create a gallery using HTML5 Canvas Black&White for hover effects, however I am having a bit of trouble.[/FONT][/COLOR][COLOR=#000000][FONT=Arial]I can get the effect work perfectly on one image but I can’t seem to get it to work on more than one.[/FONT][/COLOR][COLOR=#000000][FONT=Arial]Here is what I have:

```auto
[FONT=Consolas]([/FONT][COLOR=#00008B][FONT=Consolas]function[/FONT][/COLOR][FONT=Consolas]()[/FONT][FONT=Consolas]{[/FONT]

```

[/FONT][/COLOR][/LEFT]

```auto

      [COLOR=#00008B]var[/COLOR] supportsCanvas = !!document.createElement([COLOR=#800000]'canvas'[/COLOR]).getContext;  
      supportsCanvas && (window.onload = greyImages);  

      [COLOR=#00008B]function[/COLOR] greyImages() {  
          [COLOR=#00008B]var[/COLOR] ctx = document.getElementsByTagName([COLOR=#800000]"canvas"[/COLOR])[[COLOR=#800000]0[/COLOR]].getContext([COLOR=#800000]'2d'[/COLOR]),  
              img = document.getElementById([COLOR=#800000]"cvs-src"[/COLOR]),  
              imageData, px, length, i = [COLOR=#800000]0[/COLOR],  
              grey;  

          ctx.drawImage(img, [COLOR=#800000]0[/COLOR], [COLOR=#800000]0[/COLOR]);  

          [COLOR=gray]// Set 500,500 to the width and height of your image. [/COLOR]
          imageData = ctx.getImageData([COLOR=#800000]0[/COLOR], [COLOR=#800000]0[/COLOR], [COLOR=#800000]378[/COLOR], [COLOR=#800000]225[/COLOR]);  
          px = imageData.data;  
          length = px.length;  

          [COLOR=#00008B]for[/COLOR] ( ; i < length; i+= [COLOR=#800000]4[/COLOR] ) {  
              grey = px* * .[COLOR=#800000]1[/COLOR] + px[i+[COLOR=#800000]1[/COLOR]] * .[COLOR=#800000]1[/COLOR] + px[i+[COLOR=#800000]2[/COLOR]] * .[COLOR=#800000]1[/COLOR];  
              px* = px[i+[COLOR=#800000]1[/COLOR]] = px[i+[COLOR=#800000]2[/COLOR]] = grey;     
           }

          ctx.putImageData(imageData, [COLOR=#800000]0[/COLOR], [COLOR=#800000]0[/COLOR]);  
      }  
  })();

```

[FONT=Arial]  
[/FONT]HTML:

```auto
<article id="respond" class="first"> <a href="solider.php" rel="#overlay" style="text-decoration:none"> <img id="cvs-src" src="images/thumbnails/regular/solider.png" /> <canvas width=378 height=225></canvas> <div class="caption"> <p><img class="enlarge" src="images/enlarge.png"/>Click To <em>View Project</em></p> </div> </a> </article>

```

and then a bit of CSS:

```auto
[LEFT][COLOR=#000000][FONT=Consolas] figure article img [/FONT][/COLOR][COLOR=#000000][FONT=Consolas]{[/FONT][/COLOR][/LEFT]

width: [COLOR=#800000]100[/COLOR]%;
padding: [COLOR=#800000]0[/COLOR];
margin: [COLOR=#800000]0[/COLOR];
border: [COLOR=#800000]0[/COLOR];
vertical-align:bottom;
   }

   figure article:hover img {
display: block;
   }

   figure article canvas {
width: [COLOR=#800000]100[/COLOR]%;
padding: [COLOR=#800000]0[/COLOR];
margin: [COLOR=#800000]0[/COLOR];
border: [COLOR=#800000]0[/COLOR];
position: absolute;  
left: [COLOR=#800000]0[/COLOR];  
top: [COLOR=#800000]0[/COLOR];  
opacity: [COLOR=#800000]1[/COLOR];  
-webkit-transition: all [COLOR=#800000]1s[/COLOR];  
-moz-transition: all [COLOR=#800000]1s[/COLOR];  
-o-transition: all [COLOR=#800000]1s[/COLOR];  
-ms-transition: all [COLOR=#800000]1s[/COLOR];  
transition: all [COLOR=#800000]1s[/COLOR];
    }  

    figure article canvas:hover {  
        opacity: [COLOR=#800000]0[/COLOR];  
[LEFT][COLOR=#000000][FONT=Consolas]}[/FONT][/COLOR][/LEFT]

```