When trying to squeeze every last morsel of optimisation out of a canvas app, we need to be concerned about avoiding drawing anything we don't need to. This means anything that the user cannot possibly see should not be drawn. Lets take a look...
Thinking about shape-point collision detection in a case where there are many shapes on the stage, and how to improve performance. Here's my explanation of those functions and an possibly better approach.
If you know about Stage.draw() and that you don't need to worry about it any more, don't read this - put your feet up and have some coffee & cake. If you are at all fuzzy on the subject, read on...
I had always created Konva stages by setting the container parameter to the selector of an existing HTML DIV element. Then I needed to create an image from canvas elements as a one-off which I would then draw into the main stage. So how to do that without having a physical, in-the-DOM container DIV?
I mistakenly thought that a math-based mouse pointer hit testing approach might be faster than Konva's built-in approach. In the end I had to agree that Konva has it covered and there's no optimisation to be done. Here's the explanation...