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..
In this short post I show you how to keep an oversized image inside a framing rectangle whilst allowing the user to position the image within the frame, with no gaps allowed. Here's the approach...
Based on the learnings from an earlier clip regions article I thought I would cover how to make a spotlight effect since it has been asked for a few times on the discord channel. Here we go...
I needed to make a hole in an image so I took to Google and read up on Canvas and winding. Here's the result...