Feature: Canvas Blend and Boolean modes #8661
Open
+327
−6
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds Blend Modes and Boolean merge operations to the canvas raster layers.
Both of these are handled with the globalCompositeOperation feature, and due to some technical limitations on how we render things, blend modes are implemented as a non-destructive state of the raster layer and boolean merges are a destructive action.
Blend Modes are a common feature of other image creation platforms, used for easy creation of light, shadows, textures, and recoloring objects.
Technical Info:
Because we're using the features built into Konva and CSS rendering already, the effect fits nicely into the pipeline after all pixel information is resolved (e.g. Adjustments panel) and before layer transparency is applied. This means that users can enable a blend mode, and then continue to adjust the brightness and tone, and also leverage the layer transparency to control the strength of the effect. Users can also draw and erase on a layer with an active blend mode without any additional overhead.
We use and interact with raster layer information supported as Konva objects; and when merging or combining layers for img2img actions this PR uses the Konva global composite operation to resolve those layers. However, the live view is handled through the HTMLCanvasElement's mixBlendMode, which is functionally identical for the color modes we are using but doesn't support the boolean operations. Hence booleans are an independent action submenu instead.
Some caveats of using the HTML mixBlendMode:
QA Instructions
Create some layers and mash them together.
Boolean Operations:
Booleans are accessible via the right click menu. They work on the current layer and the layer directly below it (similar to "Merge Down").

Intersect: Returns the top layer where it overlaps the bottom layer.
Cut Out: Returns the bottom layer where it overlaps the top layer.
Cut Away: Returns the top layer where it does not overlap the bottom layer.
Exclude: Returns both layers where they do not overlap.
Blend Modes:
Blend mode is accessible via the right click menu.



Example: Adding glow effect

Example: Adding half-tone dot matrix texture

Texture got from: https://texturelabs.org/textures/grunge_265/ and applied with Overlay mode.
Merge Plan
Ready to merge. Most of the PR is just new menus that interact with our existing features.
Checklist
What's Newcopy (if doing a release after this PR)