Ability to change global opacity (similar to tint(255, alpha) for images, but for all shapes)

Increasing access

We provide a tint() function that can be used to change the opacity images are drawn at. This functionality is a bit hidden since tinting the alpha channel is perhaps not the first interpretation of the word "tint" to users. It also only applies to images, so it may be unclear at first whether or not it is possible to apply it across the board from the docs.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature enhancement details

This does not change existing functionality, but just extends it, so it does not necessarily need to be built into the 2.0 release.

Some questions that I think would need to be answered:

• One can set the alpha of a fill color already. Is it necessary to have a separate function? I would think there's a benefit to it: if you have a function that draws a complex shape with multiple internal colors, to adapt it to draw it semi-transparently, one would have to create an alpha argument and multiply it in with the alpha of every color within the function. A global control would make that scenario easier.
• drawingContext.globalAlpha exists, should users use that instead? For now, that is likely the easiest way to achieve this in 2D mode. However, it doesn't work in WebGL mode, and we don't document native JS canvas features, so it's not as discoverable as p5's own functionality.
• Should tint() be extended to apply to all colors instead of just images? Maybe! I personally would be ok if this is preferred by other maintainers, but I also think that tint would not be the first place users would look when they are interested in changing opacity. Additionally, having a setting just for opacity opens the possibility of a faster 2D mode implementation that doesn't require drawing to a separate canvas before drawing to the main canvas.

A possible API would be:

opacity(): number // Returns the current opacity
opacity(newOpacity: number): void // Sets the current opacity, using the range set by `colorMode`, by default 0-255

In 2D mode this could directly set drawingContext.globalAlpha. In WebGL mode, this would have to be backed by a new uniform that gets sent to shaders and gets multiplied with other colors.

Start by reviewing the existing tint() behavior, the 2D drawingContext.globalAlpha option, and the WebGL rendering path described in the issue. Resolve the API questions around opacity range, tint interaction, and 2D/WebGL consistency before implementation. Done means a maintainers-approved opacity API works across shapes and rendering modes and is discoverable in the documentation.