gistfile1.js

        y = 0;
      for( var i = 0, len = this.visible; i < len; ++i ) {
        ctx.save();
        var img = this.images[i+this.index];
        ctx.drawImage(img, x, y, w, h);
        
        ctx.save();
        
        //var ny = y - ch - (rh*2); // offset from the bottom so should be negative value
        var ny = -1*(ch + ((h+y) - ch) + rh);
        //console.log(y + "," + ch + "," +h + ": " + ny);
        
        // reflect the new image, scale with - 1 to flip
        ctx.translate(x,0);
        ctx.scale(1,-1);
        ctx.drawImage(img, 0, ny, w, rh);
        ctx.restore();
        ctx.save();
        ctx.scale(1,-1);
        
        var gradient = ctx.createLinearGradient(0, ny+rh, 0, ny);
        console.log("gradient: (" + x + "," + (ny+rh)+ ") (" + (x+w)+ ", " + ny + ")");
        
        gradient.addColorStop(1.0, "rgba(" + this.bgColor.r + "," + this.bgColor.g + ", " + this.bgColor.b + ", 1.0)");
        gradient.addColorStop(0.5, "rgba(" + this.bgColor.r +  ", " + this.bgColor.g + ", " + this.bgColor.b + ", "+(1-ro)+")");
        
        ctx.fillStyle = gradient;
        console.log(x + "," + w + "," + ny + ", " + rh);
        ctx.translate(x,0); 
        ctx.rect(0, ny, w, rh);
        ctx.fill(); 
        ctx.restore();
        
        x += w;
        y += 50;
      }