Is there any limit for Stage width and height in React Konva?

Question

I was working with React Konva. Using it's stage element width to be 90,000 and height to be 60,000. it gives blank page with a sad smile.

Can anyone tell me what's the limit for stage width and height?

Answer 1

The Konvajs library is a 'wrapper' for the HTML5 canvas element. Meaning that Konvajs is subject to the limits of the canvas built in to each browser.

Your question should therefore be 'What are the limits to the size of an HTML5 canvas?', which has been answered here - the browsers apply different limits.

What should you do to overcome the constraints? There is an article in the Konvajs documentation here that provides options for dealing with a large canvas. You should note the point made in this article that handling a large canvas is slow.

[EDIT] As pointed out by the OP, via the link to current browser canvas size limits, and testing on Chrome 85.0.4183.102 (PC 64bit), I should be able to have a canvas sized to 65,535 x 65,535. So I constructed this snippet to test. It draws a stage with a big cross from corner to corner, with the dimensions shown in the dropdown. I get to 12k x 12k then at the next size of 20k I get the sad-face and no canvas. Additionally, I added a try-catch around the stage-create and was expecting some kind of error to be thrown. However, no error appears.

I conclude that something is 'getting in the way' of the code's ability to exploit the full canvas potential. I looked at the stage, layer and util classes in the Github Konvajs repository and could not see anything obviously limiting the size at creation or resize of the stage.

Whilst the cause of the failure to exploit the stated available canvas size is inconclusive at the moment, a solution vector to pursue would be to employ a viewport. See this question for a discussion of the concept.

let     
    sizeW = 20000,
    sizeH = 20000,
    stage = null;

function drawStage(size){

  try{

    // Set up a stage
    stage = new Konva.Stage({
          container: 'container',
          width: size,
          height: size,
          draggable: true
        }),

      // add a layer to draw on
      layer = new Konva.Layer(),

      line1 = new Konva.Line({points: [0, 0, size, size], stroke: 'cyan', strokeWidth: 10}),
      line2 = new Konva.Line({points: [0, size,  size, 0], stroke: 'cyan', strokeWidth: 10});

      layer.add(line1, line2);
      stage.add(layer);
      stage.draw();
  }
  catch(err){
    alert('error ' + err.message)
  }
}

$('#size').on('change', function(){
  let  size = parseInt($('#size').val(), 10) * 1000;
  stage.destroyChildren()
  stage.destroy();
  drawStage(size);
})

// Initial draw:
let  size = parseInt($('#size').val(), 10) * 1000;
drawStage(size);

body {
  margin: 10;
  padding: 10;
  overflow: hidden;
  background-color: #f0f0f0;
}
#container {
border: 1px solid silver;
width: 500px;
height: 300px;
overflow: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/konva@^3/konva.min.js"></script>
<p>Use the dropdown to have stage redrawn at increasing sizes. On PC/Chrome I get to 12k then get the sad-face at 20k. </p>
<p>
  <select id='size'>
    <option value='4'  selected='selected'>4k x 4k</option>
    <option value='8'>8k x 8k</option>
    <option value='12' >12k x 12k</option>
    <option value='20' >20k x 20k</option>
    <option value='30'>30k x 30k</option>    
  </select>
</p>
<div id="container"></div>