Click event in shape in canvas only triggering in the original position after rotate

Question

I'm using konvajs to draw and use canvas with shapes inside where each have a click listener.

I have a scenario where I need to rotate the entire canvas. Issue is that when I do rotate the canvas container, the event listener for the shapes is kept in the original position.

Surprisingly I don't see the same behavior for when I translate the canvas - I would expect to see the same behavior as the shapes change position.

Have a reproducible example here: https://codesandbox.io/s/broken-wave-r4f7i7

Answer 1

Konva doesn't support transforming of container with CSS. It can't calculate pointer position correctly in that case.

If you need to rotate/scale canvas, please use Konva methods.

stage.rotation(90);