Am new to concept of virtual canvas, any idea why the below code does not work?
You must also wait with getImageData etc. until the image has loaded, so move everything that needs to be done after the image has loaded inside the onload handler (or wrap them in a function called from onload):
img1.onload = function () {
ctx1.drawImage(this, 0, 0);
imgdata = ctx1.getImageData(0, 0, c2.width, c2.height);
ctx2.putImageData(imgdata, 0, 0);
};
If you don't then the image may not be loaded and drawn to canvas when you call getImageData which results in a blank byte array.