Need help with HTML5 Canvas Black&White Image Effect

programming web dev
1

[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:

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

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


      [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:

<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:

[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]