Search code examples
konvajsreact-konva

How to set stage width and height to 100% React Konva

I want to set the width and height of my Stage to 100%. Kind of like this, so that it fills the parent div:

<Stage
    width="100%"
    height="100%"
></Stage>

Is this possible? Thanks!

Solution

  • No. You have to set the Konva.Stage size with pixels value.

    If you want to use 100% values, you need to set such values to the parent <div> container of the stage with CSS. Then calculate the size of that <div> in pixels and use it for Stage.

    Take a look into Responsive Canvas Stage Demo.

    var container = document.querySelector('#stage-parent');
stage.width(container.offsetWidth);
stage.height(container.offsetHeight);