Skip to content

Conversation

@dunkeroni
Copy link
Contributor

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:

  1. Blend modes visually interact with the checkerboard pattern background of the canvas when there are no underlying layers, but that effect is not included when merging or using the layers.
  2. Blend mode also applies to the blue border around a raster layer when using the Move tool.

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.
Screenshot From 2025-11-14 18-31-03

Blend Modes:

Blend mode is accessible via the right click menu.
Screenshot From 2025-11-14 17-20-15
Screenshot From 2025-11-14 17-19-53
Screenshot From 2025-11-14 17-23-02

Example: Adding glow effect
image

Example: Adding half-tone dot matrix texture
Texture got from: https://texturelabs.org/textures/grunge_265/ and applied with Overlay mode.
image

Merge Plan

Ready to merge. Most of the PR is just new menus that interact with our existing features.

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • ❗Changes to a redux slice have a corresponding migration
  • Documentation added / updated (if applicable)
  • Updated What's New copy (if doing a release after this PR)

@github-actions github-actions bot added the frontend PRs that change frontend files label Nov 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend PRs that change frontend files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant