Scrawl-canvas v8
- Filters test 015
Using assets in the filter stream; filter compositing
Line IN
source
source-alpha
star
wheel
flower
Line MIX
source
source-alpha
star
wheel
flower
Composite operation
source-over
source-in
source-out
source-atop
source-only
destination-over
destination-in
destination-out
destination-atop
destination-only
xor
clear
Opacity
Offset - X
Offset - Y
Test purpose
Create two Cells which we can use to generate images for the filter
Load an additional image from the DOM
For each of our assets, create an image filter to load the assets into the filter pipeline
Create a compositing filter
Create a Block entity, using a gradient for its fill, and apply the compositing filter to it
Update the filter's lineIn and lineMix attributes and note the effect
Update the composite operation, check that the choice changes the display appropriately
In particular make sure the lineMix asset moves when the filter offset values are updated
Annotated code