I'm working with the HTML5 canvas element. Let's say I have 2 ImageData objects that I want to bine to be able to put on one canvas. Lets assume that I don't care how these images bine. Both ImageData objects have the exact same pixel count and shape.

What's the best way to bine the two images?

I figure that I can write a for loop and iterate over the ImageData array and manually bine and set every rgba value per pixel, but I'm wondering if there's a better way? I need this operation to happen as quickly as possible.

Thanks in advance.

I'm working with the HTML5 canvas element. Let's say I have 2 ImageData objects that I want to bine to be able to put on one canvas. Lets assume that I don't care how these images bine. Both ImageData objects have the exact same pixel count and shape.

What's the best way to bine the two images?

I figure that I can write a for loop and iterate over the ImageData array and manually bine and set every rgba value per pixel, but I'm wondering if there's a better way? I need this operation to happen as quickly as possible.

Thanks in advance.

• javascript
• html
• canvas

• What does "bine" mean? You want one dropped over the other so you can't see it? You want one superimposed on top of the other? You want them stacked end-to-end? – Chuck Commented Oct 7, 2010 at 2:54
• I want to drop one on top of the other. Most of the pixels in these images are pletely transparent. So if image1 has a black circle on the left half of it, and image2 has a square on the right half of it, I'd like to bine them so I get 1 image with a circle on the left and a square on the right. – ctown4life Commented Oct 7, 2010 at 3:05

1 Answer 1

If you're simply looking to superimpose one image on top of another, you probably want to do something like this:

ctx.drawImage(image1, x, y);
// adjust globalAlpha as needed, or skip if the image has its own transparency
ctx.globalAlpha = 0.5;
ctx.drawImage(image2, x, y);

OR, depending on the specific effect you're after:

ctx.drawImage(image1, x, y);
ctx.globalCompositeOperation = "lighten"; // many other possibilities here
ctx.drawImage(image2, x, y);

This will probably be faster than drawing pixel-by-pixel through the get/putImageData methods, though by how much is browser-dependent.