Skip to main content

HTML5 Large Canvas Scrolling Demo

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
import Konva from 'konva';

const WIDTH = 3000;
const HEIGHT = 3000;
const NUMBER = 200;

const stage = new Konva.Stage({
  container: 'container',
  width: WIDTH,
  height: HEIGHT,
});

const 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 (let i = 0; i < NUMBER; i++) {
  layer.add(generateNode());
}

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
import Konva from 'konva';

const width = window.innerWidth;
const height = window.innerHeight;

const stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
  draggable: true,
});

const layer = new Konva.Layer();
stage.add(layer);

const WIDTH = 3000;
const HEIGHT = 3000;
const NUMBER = 200;

function generateNode() {
  return new Konva.Circle({
    x: WIDTH * Math.random(),
    y: HEIGHT * Math.random(),
    radius: 50,
    fill: 'red',
    stroke: 'black',
  });
}

for (let i = 0; i < NUMBER; i++) {
  layer.add(generateNode());
}

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.

Instructions: 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)
import Konva from 'konva';

const width = window.innerWidth;
const height = window.innerHeight;

const stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
});

const layer = new Konva.Layer();
stage.add(layer);

const WIDTH = 3000;
const HEIGHT = 3000;
const NUMBER = 200;

function generateNode() {
  return new Konva.Circle({
    x: WIDTH * Math.random(),
    y: HEIGHT * Math.random(),
    radius: 50,
    fill: 'red',
    stroke: 'black',
  });
}

for (let i = 0; i < NUMBER; i++) {
  layer.add(generateNode());
}

// now draw our bars
const scrollLayers = new Konva.Layer();
stage.add(scrollLayers);

const PADDING = 5;

const 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();
  const delta = (verticalBar.y() - PADDING) / availableHeight;

  layer.y(-(HEIGHT - stage.height()) * delta);
});

const 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();
  const 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);
});

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.

Instructions: try to scroll with native bars.

import Konva from 'konva';

// First we need to add required CSS
const style = document.createElement('style');
style.textContent = `
  #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;
  }
`;
document.head.appendChild(style);

// Then create required DOM structure
const scrollContainer = document.createElement('div');
scrollContainer.id = 'scroll-container';
const largeContainer = document.createElement('div');
largeContainer.id = 'large-container';
const container = document.createElement('div');
container.id = 'stage-container';

scrollContainer.appendChild(largeContainer);
largeContainer.appendChild(container);
document.body.appendChild(scrollContainer);

const WIDTH = 3000;
const HEIGHT = 3000;
const NUMBER = 200;

// padding will increase the size of stage
// so scrolling will look smoother
const PADDING = 200;

const stage = new Konva.Stage({
  container: 'stage-container',
  width: window.innerWidth + PADDING * 2,
  height: window.innerHeight + PADDING * 2,
});

const 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 (let i = 0; i < NUMBER; i++) {
  layer.add(generateNode());
}

function repositionStage() {
  const dx = scrollContainer.scrollLeft - PADDING;
  const dy = scrollContainer.scrollTop - PADDING;
  stage.container().style.transform =
    'translate(' + dx + 'px, ' + dy + 'px)';
  stage.x(-dx);
  stage.y(-dy);
}
scrollContainer.addEventListener('scroll', repositionStage);
repositionStage();