<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();
This Pen doesn't use any external CSS resources.