<script src="https://unpkg.com/konva@^3/konva.min.js"></script>
<div id='stagescroll'>
  <div id="container"></div>
</div>
* {
  box-sizing: border-box;
}

body {
  margin: 10;
  padding: 10;
  overflow: hidden;
  background-color: #f0f0f0;
}

#stagescroll 
{
  width: 800px;
  height: 600px;
  overflow: scroll;
}
#container {
  border: 1px solid silver;
}

#info {
  margin-left: 20px;
}
  // Set up a stage
let     
    // Konva housekeeping
    stage = new Konva.Stage({
      container: 'container',
      width: window.innerWidth * 2,
      height: window.innerHeight * 2
    }), 

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

    rect = new Konva.Rect({
      x: 400,
      y: 50,
      width:  window.innerWidth * 1.5,
      height:  window.innerHeight * 1.2,
      stroke: 'black',
      strokeWidth: 1,
      fill: 'magenta'
    });
    


// Add the layer to the stage and shape to layer
stage.add(layer);
layer.add(rect);

stage.draw();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/konva/7.0.3/konva.min.js