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
Post a Comment