This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Keith Lang
Posted Aug 22 - Read on Facebook

I don't think it's possible given my research, but wanted to check: Is there any painless way to put images on the canvas using various composite modes? For example, Multiply, or Screen. I know Canvas supports it, but it seems not supported outside of Canvas for now?

5 Comments

Øyvind Nordbø

-webkit-blend-mode

Keith Lang

Sorry, a little more info?

Jordan Robert Dobson

Yes you can...

bg = new Layer
size: Screen
image: Utils.randomImage()

foo = new Layer
backgroundColor: "red"
style:
"mix-blend-mode": "multiply"

Keith Lang

Super-helpful, so many thanks! That works (small typo of background instead of backgroundColor for anyone who just pastes in the code)

Keith Lang

As a followup, I'm using a bitmap mask on a solid color for adding 'lighting' effects to an image. Can't share the project, but here's how you can get Framer to composite masked dynamically colored content, for example:

myMaskedLayer = new Layer
¬ backgroundColor: ‘red’
¬ style: "mix-blend-mode": "screen"
¬ opacity: 0.2
myMaskedLayer.style["-webkit-mask"] = "url(images/bitmapMask.png)"

I'm really impressed that Framer can do bitmap masking and more impressively, compositing logic ("screen") like this. As a caveat, you'll want to make sure your mask and source are the same dimensions, as there's some unexpected things that happen if you try to draw either at a fraction of their original size etc. But Scale seems to work appropriately.

Overall, it's really amazing. Thanks Framer team, and Framer community for being as great as you are!

Read the entire post on Facebook