The HTML5 canvas has the globalCompositeOperation feature which lets us control how new content being drawn onto the canvas will play with the content that is already there. Konva's API lets us apply it to our shapes. I was curious to visualize and understand what it does..
MDN has the list of the composition operations here. I made a demo...
In my demo I load the globalCompositeOperation options into a select list (click the select box then arrow up & down to see the different effects quickly) and apply them to an image of Yoda which is being drawn into a canvas containing a filled rect and a couple of smaller filled circles. The Yoda image is overlapping the other shapes.
I built the demo as I was interested in seeing the effect of the composition operations. The MDN page has a demo but it was hard to understand exactly what was happening with their demo subjects.
I'm not going to list out the option names - to be honest I find them hard to visualise from their descriptions and even the MDN demo leaves me confused, which is why I made the Konva demo.
The most useful use-case I can currently see for composing is making masked images. I wrote another post about this so as to keep things here on point.
Summary
The globalCompositeOperation is a built-in feature of the HTML5 canvas and is exposed for us to use in Konva's API. In the demo you can fill your boots and play with the various operation.
Thanks for reading.
VW. May 2024
Photo by Getty Images at Unsplash+
