We are often required to position shapes relative to each other - maybe circles mark points on a line - but then you move one of the shapes and update the others position but it doesn't make sense. The answer is relativity!
So you need to make an image mask. That means making a shape and drawing the image into that shape so that the area of the image outside the shape is cut off. But you can't use a path so clipping is off the menu. How to get the mask with composition operations or fill pattern image...
One of the common requirements we see coming through the Konva Discord channel is modifying the stock Transformer anchors with popular requests being how to change the anchors shape and colors, and how use an icon for the rotation anchors. Lets take a look...
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..
I'm developing an app that will generate / layout rich text in a canvas. So far my focus has been on the browser but now I need to do some automated testing for which I use node. But node doesn't provide text support out-of-the-box so we have to use node-canvas. How to work with text in node-canvas?
Shape rotation starts conceptually simple, but gets frustratingly hard quite quickly once you move away from very simple cases. This article discusses the basics and provides working code to rotate any shape around any arbitrary point on the stage. Handy stuff to have in your kit bag.
We can use a Kova.Transformer to put a temporary frame around grouped shapes, but what if we want the frame to persist? Here's a solution for that...
Ever needed to have a rect with alpha applied to the fill bit not the stroke - here's how.