Improve mapping of blendMode to globalCompositeOperation
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 24k
- Forks
- 3.8k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 25
Description
Better documentation of blendModes and what they do (and do not) cover would be helpful
- Specify mappings of canvas globalCompositeOperation types to blendModes, i.e.:
source-over->BLENDdestination-out->REMOVE- [etc.]
- Specify which globalCompositeOperation types are not implemented in P5, i.e.:
destination-insource-atop- [any others]
Most appropriate sub-area of p5.js?
- Accessibility (Web Accessibility)
- Build tools and processes
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Friendly error system
- Image
- IO (Input/Output)
- Localization
- Math
- Unit Testing
- Typography
- Utilities
- WebGL
- Other (specify if possible)
Feature enhancement details:
In P5 (2D) most of the canvas globalCompositeOperation types are implemented, but renamed, and others are not implemented. Because these modes can be confusing, and there is currently better documentation/examples of the globalCompositeOperation than of P5 blendMode, it would be useful to:
- Document which blendMode corresponds to which globalCompositeOperation type OR allow globalCompositeOperation type names as aliases
- Document which globalCompositeOperation types are NOT mapped to blendMode OR add mappings for them
- Improve documentation/examples for P5 to achieve parity with, say https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
While it seems to me like it would be relatively easy to add the remaining unmapped globalCompositeOperation types (for example, destination-in and source-atop do not appear to be mapped into blendMode) and a note for how the names of types map to blendMode modes, I understand that this may be much more complicated to support in WEBGL mode, so I'd be happy if there were at least a note in the documentation for what is missing and why so it's clearer what bits to work around using drawingContext.
So my first preference would be to make all the globalCompositeOperation types work in P5 blendMode, but I would certainly be OK with documenting what they map to and which ones are not mapped.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the p5.js blendMode documentation and examples, then compare the documented modes with the MDN globalCompositeOperation reference. Determine the 2D and WebGL scope, and finish by either documenting each mapping and omission or defining support for the requested aliases and modes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100