Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

add HTML5 Canvas b&w effect to more than one image

add HTML5 Canvas b&w effect to more than one image

Problem

I am wanting to create a gallery using HTML5 Canvas Black for hover effects however I am having a bit of trouble.

I can get the effect work perfectly on one element but I can't seem to get it to work on more than one.

Here is what I have:

(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,  
              grey;  

          ctx.drawImage(img, 0, 0);  

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

          for ( ; i 

HTML:


    
        

Click To View Project

CSS:

   figure article img {
width: 100%;
padding: 0;
margin: 0;
border: 0;
vertical-align:bottom;
   }

   figure article:hover img {
display: block;
   }

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

    figure article canvas:hover {  
        opacity: 0;  
    }  
Problem courtesy of: Daimz

Solution

It looks like you are applying it to only one canvas here:

var ctx = document.getElementsByTagName("canvas")[0].getContext('2d')

You are fetching the first canvas ([0]) and getting its context. Perhaps this would be better:

var canvases = document.getElementsByTagName("canvas");
for (var j = 0; j 
Solution courtesy of: James Clark

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

add HTML5 Canvas b&w effect to more than one image

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×