Blend Mode Polyfill

[austinh]

I love the blend modes that are supported by phaser/pixi but unfortunately they do not all end up looking the same as the the ones i use in Photoshop.

Some browsers just don't support them, and those that do use different math then what i'm looking for.

 

So I stumbled along this great program:

 

https://github.com/Phrogz/context-blender

 

It's a blend mode polyfill and makes things consistent across browsers. However, I'm having trouble implementing it with Phaser. It's a typical pixel loop editor.

I know it wont be as performant as native blend modes but I require support for IE 9+. I was thinking that caching the canvas might help if I have to constantly switch back to it: (ex: on mouseover set blend mode to luminosity, on mouseout go back to normal). Would this be an effective strategy? Not sure how caching would work with this. I was thinking having it work like "Tint"

 

Anyone have any idea how to implement this? I'm just getting started with phaser so it's a little difficult when I'm not sure where to start.

if someone could write some example code that'd be really helpful. Thanks.