Add blending mode "multiply" for image layers

[iamsterdam800]

Currently in Polotno the default way to blend image layers only allows to use transparency. However, to achieve the desired effect I need to blend the top image layer using "multiply" blending mode.

According to SO (https://stackoverflow.com/a/41498864) that is done by setting globalCompositeOperation = 'multiply' in the canvas context before a call to drawImage().

Current result with the default (transparency-based) blending:

Desired result with "multiply" blending:

[lavrton]

Interesting. I need to think about it. Right now, I am not sure the ability to customize globalCompositeOperation for image element is a good API.

As workaround, you can create a custom element for such image https://polotno.dev/docs/custom-element and control its globalCompositeOperation by yourself.

[iamsterdam800]

Yeah, maybe a better API could be a field blendMode with a set of predefined modes? E.g.:

{
  "id":"exv-BKZyxH",
  "type":"image",
  ...
  "blendMode": "multiply",
  ...
}

and then behind the scenes it would result in a respective globalCompositeOperation applied on canvas.. Btw, using blending modes it's also possible to apply image mask (although it was already implemented differently..).

If you think that's not something useful for others, I'll look into making a custom element. Thanks for a hint!

[iamsterdam800]

Following your advise, I successfully implemented it with a custom image element.