Html5 Get Particular Layer image data

Question

i am creating a image slider with html5 and jquery what i want to do is add 3 images on top of each other in one canvas and then get pixeldata of first image and remove some of it's pixels to show 2nd image through first i'm using jCanvas Plug-in To Do This In Jquery What I've Got So Far Is

 $(document).ready(function(){
function invert() {
  $("canvas").setPixels({
    x: 150, y: 150,
    width: 100, height: 75,
    // loop through each pixel
    each: function(px) {
      px.r = 255 - px.r;
      px.g = 255 - px.g;
      px.b = 255 - px.b;
      px.a = 255 - px.a;
    }
  });
}

$("canvas")
.addLayer({
    method: "drawImage",
    source: "images/01.jpg",
    x: 100, y: 100,
    width: 480, height: 440
}).addLayer({
    method: "drawImage",
    source: "images/02.jpg",
    x: 100, y: 100,
    width: 380, height: 340
}).addLayer({
    method: "drawImage",
    source: "images/01.jpg",
    x: 100, y: 100,
    width: 280, height: 240,
    load: invert
})
// Draw each layer on the canvas
.drawLayers();

});

Now What it Does Is making A hole In all the Images Means Erase all the Pixels Of That Portion Of all Images and Show the Background of canvas Is It Possible to Get Only Pixels Of Particular image or layer and Invert It is there any jquery plug-in available? any other way to do that? Any Help On this Will Be Very Useful To Me....Thanx In Advance....

Answer 1

Keep in mind that drawing on a canvas is like painting on paper, it doesn't remember what you drew before only what you have in the canvas right now so if you draw one image and then draw over it with another, the old picture is lost forever.

What you should do is keep all three images in three different buffers (simply load the three different images into three different image objects). Then draw the top most image in the context. When you wish to dissolve the first image into the second, instead of deleting pixels from the top image (which will only show the the background), simply use the same coordinates you would use to remove pixels from the first image to get the pixel data from the second image (the coordinates for deleting pixel from the top image can be used as indexes to the image data for the second image) and copy those values to the canvas, again using the same coordinates, for example: If you algorithm leads you to first remove pixel x = 100, y = 175, use those coordinates to get the data from the buffer of the second image and copy that to the same coordinates in the canvas' image data.

Here's some code:

var width  = 300;
var height = 300;

var img1 = new Image();
img1.src = "image1.png";
var img2 = new Image();
img2.src = "image2.png";

function go()
{
    // Wait for the images to load

    if ( !img1.complete || !img2.complete )
    {
        setTimeout( go, 100 );
        return;
    }

    // Create a temporary canvas to draw the other images in the background

    var tc = document.createElement( "canvas" );
    tc.width = width;
    tc.height = height;
    var c2 = tc.getContext( "2d" );

    // Draw the first image in the real canvas (change the ID to your canvas ID)

    var c = document.getElementById( "myCanvas" ).getContext( "2d" );
    c.drawImage( img1, 0, 0 );
    var data1 = c.getImageData( 0, 0, width, height );  // Get the data for the first image

    // Draw the second image in the temporary canvas (which is hidden) and get its data

    c2.drawImage( img2, 0, 0 );
    var data2 = c2.getImageData( 0, 0, width, height );

    // Copy the data from the hidden image to the visible one
    // This is where your magic comes into play, the following
    // is just a very very simple example

    var pix1 = data1.data;
    var pix2 = data2.data;

    for ( var x = 0; x < width; x++ )
    {
        for ( var y = 0; y < height; y++ )
        {
            var pos = ( ( y * width ) + x ) * 4;
            pix1[ pos ] = pix2[ pos++ ];
            pix1[ pos ] = pix2[ pos++ ];
            pix1[ pos ] = pix2[ pos++ ];
            pix1[ pos ] = pix2[ pos ];
        }
    }

    // Redraw the visible canvas with the new data

    c.putImageData( data1, 0, 0 );
}

window.onload = go;

Answer 2

The canvas element does not provide the ability to use layers like that. You may need to check add-ons like canvas collage or CanvasStack