Maintain aspect ratio for stage

Question

I'm trying to set an aspect ratio to the Stage element,but without any luck.

For example, with a canvas, I would write the following for landscape:

const dpr = window.devicePixelRatio || 1
const aspectRatio = 16 / 9
const canvasHeight = 1080 * dpr;
const canvasWidth = 1920 * dpr;

<canvas 
  height={canvasHeight} 
  width={canvasHeight * aspectRatio}
  style={{
    maxWidth: '100%',
    maxHeight: '100%
  }}
/>

This would result in a canvas with the required aspect ratio contained within the current div. When I need landscape I would change the aspect ratio to 6 / 19;

I think the way Konva works fir stage sizing is that it fills the container div that you link it to. Therefore, apply your aspect ratio calculation to that container div and all will be well. — Vanquished Wombat, Jun 11 '20 at 14:05

score 1 · Answer 1 · answered Jun 17 '20 at 17:43

You can do the same for stage container:

const aspectRatio = 16 / 9
const canvasHeight = 1080;
const canvasWidth = 1920;

<Stage 
  height={canvasHeight} 
  width={canvasHeight * aspectRatio}
/>

If you want to fit the stage container into parent container, so it takes 100% of parent element you can do this:

const parentWidth = parentContainer.offsetWidht;
const aspectRatio = 16 / 9
const canvasHeight = 1080;
const canvasWidth = 1920;

const scale = parentWidth / canvasWidth;

<Stage 
  height={canvasHeight / aspectRatio} 
  width={parentWidth}
  scaleX={scale}
  scaleY={scale}
/>

i tried doing this but it doesn't work https://stackoverflow.com/questions/65446119/maintain-aspect-ratio-of-a-stage-in-react-konva — deadcoder0904, Dec 25 '20 at 07:31

Maintain aspect ratio for stage

1 Answers1