javascript - Combining two images on one canvas in HTML5 -


i'm working html5 canvas element. let's have 2 imagedata objects want combine able put on 1 canvas. lets assume don't care how these images combine. both imagedata objects have exact same pixel count , shape.

what's best way combine 2 images?

i figure can write loop , iterate on imagedata array , manually combine , set every rgba value per pixel, i'm wondering if there's better way? need operation happen possible.

thanks in advance.

if you're looking superimpose 1 image on top of another, want this:

ctx.drawimage(image1, x, y); // adjust globalalpha needed, or skip if image has own transparency ctx.globalalpha = 0.5; ctx.drawimage(image2, x, y); 

or, depending on specific effect you're after:

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

this faster drawing pixel-by-pixel through get/putimagedata methods, though how browser-dependent.


Comments

Popular posts from this blog

ASP.NET/SQL find the element ID and update database -

jquery - appear modal windows bottom -

c++ - Compiling static TagLib 1.6.3 libraries for Windows -