Imagine we have this scenario. There are a very large stage 3000x3000 with many nodes inside.
User wants to take a look into all nodes, but they are not visible at once.
How to display and scroll a very big html5 canvas?
Lets think you have a very large canvas and you want to add ability to navigate on it.
I will show your 4 different approaches to achieve that:
1. Just make large stage
This is the simplest approach. But it is very slow, because large canvases are slow.
User will be able to scroll with native scrollbars.
Pros:
- Simple implementation
Cons:
- Slow
Show source code!
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Canvas Scrolling Demo</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f0f0f0;
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var WIDTH = 3000;
var HEIGHT = 3000;
var NUMBER = 200;
var stage = new Konva.Stage({
container: 'container',
width: WIDTH,
height: HEIGHT,
});
var layer = new Konva.Layer();
stage.add(layer);
function generateNode() {
return new Konva.Circle({
x: WIDTH * Math.random(),
y: HEIGHT * Math.random(),
radius: 50,
fill: 'red',
stroke: 'black',
});
}
for (var i = 0; i < NUMBER; i++) {
layer.add(generateNode());
}
</script>
</body>
</html>
2. Make stage draggable (navigate with drag&drop)
That one is better because stage is much smaller.
Pros:
- Simple implementation
- Fast
Cons
- Sometimes drag&drop navigation is not the best UX
Show source code!
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Canvas Scrolling Drag Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
draggable: true,
});
var layer = new Konva.Layer();
stage.add(layer);
var WIDTH = 3000;
var HEIGHT = 3000;
var NUMBER = 200;
function generateNode() {
return new Konva.Circle({
x: WIDTH * Math.random(),
y: HEIGHT * Math.random(),
radius: 50,
fill: 'red',
stroke: 'black',
});
}
for (var i = 0; i < NUMBER; i++) {
layer.add(generateNode());
}
</script>
</body>
</html>
3. Emulate scrollbars.
You will have to draw them manually and implement all moving functionality.
That is quite a lot of work. But works good for many apps.
Instruction: try to scroll with bars.
Pros:
- Works ok
- Intuitive scroll
- Fast
Cons
- Scrollbars are not native, so you have to implement many things manually (like scroll with keyboard)
Show source code!
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Canvas Scrolling Drag Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
var WIDTH = 3000;
var HEIGHT = 3000;
var NUMBER = 200;
function generateNode() {
return new Konva.Circle({
x: WIDTH * Math.random(),
y: HEIGHT * Math.random(),
radius: 50,
fill: 'red',
stroke: 'black',
});
}
for (var i = 0; i < NUMBER; i++) {
layer.add(generateNode());
}
// now draw our bars
var scrollLayers = new Konva.Layer();
stage.add(scrollLayers);
const PADDING = 5;
var verticalBar = new Konva.Rect({
width: 10,
height: 100,
fill: 'grey',
opacity: 0.8,
x: stage.width() - PADDING - 10,
y: PADDING,
draggable: true,
dragBoundFunc: function (pos) {
pos.x = stage.width() - PADDING - 10;
pos.y = Math.max(
Math.min(pos.y, stage.height() - this.height() - PADDING),
PADDING
);
return pos;
},
});
scrollLayers.add(verticalBar);
verticalBar.on('dragmove', function () {
// delta in %
const availableHeight =
stage.height() - PADDING * 2 - verticalBar.height();
var delta = (verticalBar.y() - PADDING) / availableHeight;
layer.y(-(HEIGHT - stage.height()) * delta);
});
var horizontalBar = new Konva.Rect({
width: 100,
height: 10,
fill: 'grey',
opacity: 0.8,
x: PADDING,
y: stage.height() - PADDING - 10,
draggable: true,
dragBoundFunc: function (pos) {
pos.x = Math.max(
Math.min(pos.x, stage.width() - this.width() - PADDING),
PADDING
);
pos.y = stage.height() - PADDING - 10;
return pos;
},
});
scrollLayers.add(horizontalBar);
horizontalBar.on('dragmove', function () {
// delta in %
const availableWidth =
stage.width() - PADDING * 2 - horizontalBar.width();
var delta = (horizontalBar.x() - PADDING) / availableWidth;
layer.x(-(WIDTH - stage.width()) * delta);
});
stage.on('wheel', function (e) {
// prevent parent scrolling
e.evt.preventDefault();
const dx = e.evt.deltaX;
const dy = e.evt.deltaY;
const minX = -(WIDTH - stage.width());
const maxX = 0;
const x = Math.max(minX, Math.min(layer.x() - dx, maxX));
const minY = -(HEIGHT - stage.height());
const maxY = 0;
const y = Math.max(minY, Math.min(layer.y() - dy, maxY));
layer.position({ x, y });
const availableHeight =
stage.height() - PADDING * 2 - verticalBar.height();
const vy =
(layer.y() / (-HEIGHT + stage.height())) * availableHeight + PADDING;
verticalBar.y(vy);
const availableWidth =
stage.width() - PADDING * 2 - horizontalBar.width();
const hx =
(layer.x() / (-WIDTH + stage.width())) * availableWidth + PADDING;
horizontalBar.x(hx);
});
</script>
</body>
</html>
4. Emulate screen moving with transform.
That demo works really good, but it may be tricky.
The idea is:
- We will use small canvas with the size of the screen
- We will create container with required size (3000x3000), so native scrollbars will be visible
- When user is trying to scroll, we will apply css transform for the stage container so it will be still in the center of user’s screen
- We will move all nodes so it looks like you scroll (by changing stage position)
Props:
- Works perfect and fast
- Native scrolling
Cons:
- You have to understand what is going on.
Instruction: try to scroll with native bars.
Show source code!
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Canvas Scrolling Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
height: 100%;
overflow: auto;
}
#large-container {
width: 3000px;
height: 3000px;
overflow: hidden;
}
#scroll-container {
width: calc(100% - 22px);
height: calc(100vh - 22px);
overflow: auto;
margin: 10px;
border: 1px solid grey;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="large-container">
<div id="container"></div>
</div>
</div>
<script>
var WIDTH = 3000;
var HEIGHT = 3000;
var NUMBER = 200;
// padding will increase the size of stage
// so scrolling will look smoother
var PADDING = 500;
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth + PADDING * 2,
height: window.innerHeight + PADDING * 2,
});
var layer = new Konva.Layer();
stage.add(layer);
function generateNode() {
return new Konva.Circle({
x: WIDTH * Math.random(),
y: HEIGHT * Math.random(),
radius: 50,
fill: 'red',
stroke: 'black',
});
}
for (var i = 0; i < NUMBER; i++) {
layer.add(generateNode());
}
var scrollContainer = document.getElementById('scroll-container');
function repositionStage() {
var dx = scrollContainer.scrollLeft - PADDING;
var dy = scrollContainer.scrollTop - PADDING;
stage.container().style.transform =
'translate(' + dx + 'px, ' + dy + 'px)';
stage.x(-dx);
stage.y(-dy);
}
scrollContainer.addEventListener('scroll', repositionStage);
repositionStage();
</script>
</body>
</html>