react-konva resize anchors not shown outside canvas

Question

I am trying to get react-konva to work similar as to what canva is. Having a canvas for a certain size and when I add an image, which is larger than the canvas, it should show me the resize anchors outside of the canvas, but it doesn't. It seems to clip the image at the borders of the canvas.

Can it even be done with react-konva to show the anchors outside the canvas to resize an image?

Answer 1

I am posting here the solution I found, pointed in the direction by @lavrton.

So if anyone else needs this, please have a look.

codesandbox.io/s/dry-paper-fmpn58?file=/src/App.jsx

Answer 2

react-konva or konva can't render anything outside the canvas element. To resolve the issue, you can create a large canvas and render "background" and "page content" as part of the main canvas. To cut content by page size you can do the following:

1. Draw gray background of the canvas
2. Create a group and put all "page" content into it
3. Use clipping on the group to cut content to the page
4. Put transformer on top of the group

As an alternative, instead of using a group with a clip, you can put semi-transparent shape with a hole in it.