CODEWITHSUNDEEP
javascriptcanvas
user65165
user65165

Reputation: 972

GetImageData and multiple images

How to use getImageData() in js, when the images are drawn into the canvas on top of one another? (I need the data of each image separately.)

Upvotes: 0

Views: 388

Answers (2)

Julian Jensen
Julian Jensen

Reputation: 321

Or simply create a canvas object for each image. They will visually layer correctly but you can work with image independently. If you don't mess with the z-index they will render in the order you add the canvas objects.

Upvotes: 1

markE
markE

Reputation: 105035

Here's one way:

// get the imageData for the second image

context.drawImage(secondImage,0,0);
var imageData2=context.getImageData(0,0,canvas.width,canvas.height);
context.clearRect(0,0,canvas.width,canvas.height);

// get the imageData for the first image

context.drawImage(firstImage,0,0);
var imageData1=context.getImageData(0,0,canvas.width,canvas.height);

// and now redraw the second image back on the canvas

context.drawImage(secondImage,0,0);

Upvotes: 1

Related Questions