CODEWITHSUNDEEP
javascriptcsscanvaskonvajs
Damian Tokarczyk
Damian Tokarczyk

Reputation: 526

Not scaled interaction layer on Konva / Canvas

I'm writing a simple image editor in React Konva. I generated <Stage width={500} height={500}>, but in smaller viewports, I try scale canvas sheet by CSS.

For example:

const Component = () => (
    <Div>
        <Stage {...size}> ... </Stage>
    </Div>
)

const Div = styled.div`
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  .konvajs-content {
    width: initial !important;
    height: initial !important;
  }
`;

I have noticed that the whole sheet scaling correct, but the interaction layer not. As result, if I have scaled canvas on mobile, I cannot drag and drop elements and hit on elements precisely.

Example: https://youtu.be/ulu_ot5f9Xg

I cannot scale canvas by the viewport. Other features use this canvas and expect a big resolution.

Upvotes: 0

Views: 822

Answers (1)

lavrton
lavrton

Reputation: 20298

You should not scale the Konva stage with CSS and you should not change the style of its internals. It may break the hit detection algorithm, also it may reduce the performance of your app a lot.

Instead, you should just read the size of the container DOM element and apply that size to the Stage. If required, you can use scaleX and scaleY for the stage to adjust the content.

For the demo take a look here: https://konvajs.org/docs/sandbox/Responsive_Canvas.html#Do-you-need-responsive-adaptive-canvas-for-you-desktop-and-mobile-applications

Upvotes: 2

Related Questions