добавить черно-белый эффект HTML5 Canvas для нескольких изображений

Question

Я хочу создать галерею с использованием HTML5 Canvas Black для эффектов при наведении, но у меня возникли некоторые проблемы.

Я могу добиться того, чтобы эффект отлично работал на одном элементе, но я не могу получитьэто работает на более чем одном.

Вот что у меня есть:

(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 < length; i+= 4 ) {  
              grey = px[i] * .1 + px[i+1] * .1 + px[i+2] * .1;  
              px[i] = px[i+1] = px[i+2] = grey;     
           }

          ctx.putImageData(imageData, 0, 0);  
      }  
  })();

HTML:

<article id="respond" class="first">
    <a href="gitano.php" rel="#overlay" style="text-decoration:none">
        <img id="cvs-src" src="images/thumbnails/regular/gitano.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>

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;  
    }  

Answer 1

Похоже, вы применяете его только к одному холсту:

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

Вы выбираете первый холст ([0]) и получаете его контекст. Возможно, так будет лучше:

var canvases = document.getElementsByTagName("canvas");
for (var j = 0; j < canvases.length; j ++) {
  var ctx = canvases[j].getContext('2d'),  
      img = document.getElementById("cvs-src"),  
      imageData, px, length, i = 0,  
      grey;  
  // and so on...
}