I try to make a cloth designer application within a structure based on layers just like in the Photoshop app.
I'm using an image with alpha channel and beneath it I'm placing div with different background colors. As a result, I expect changing the color of the image.
But I don't have any idea how to put over that image another layer using the same color.
When I try to repeat the same trick, it will fill extra space that I want to be transparent. In other words, I need to paint only the part of
an image, leaving another part transparent.
I tried to use canvas for filling rgb(255,0,255) parts of image, but canvas is too slow.
<div style="background: transparent url(images/main_template.png);" class="preview_middle">
<!-- override layers -->
<div class="layer" style="background: url(images/blue.jpg);" data-name="modern" data-section="pocket">
<!-- /override layers -->
<!-- color of the template -->
<div class="fill" style="background: url(images/blue.jpg);"></div>
Thanks for everybody!
I solved my problem through the canvas.
I just used globalCompositeOperation property.
.. ctx.drawImage(original, 0, 0); ctx.globalCompositeOperation = "source-in"; ctx.drawImage(fill, 0, 0); ctx.globalCompositeOperation = "source-over"; ctx.drawImage(border, 0, 0); ...
Demo is here.