Responsive Canvas Stage Demo

Do you need responsive/adaptive canvas for you desktop and mobile applications?

So first of all, there are many way to make your canvas stage “responsive”.
And you may need a different behavior for different applications.

This demo will show you the simplest solution. We will fit a canvas stage into user window with scaling.
In the demo we will care only about stage WIDTH. You may need to add extra logic if you need to fit height too.

Instructions: open demo on new window with this link:

Open Demo!

And try to resize a browser window.

Responsive Canvas Stage Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Responsive Canvas Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }

      #stage-parent {
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="stage-parent">
      <div id="container"></div>
    </div>
    <script>
      // let's think our scene virtual size will be 1000x1000px
      // but the real size will be different to fit user's page
      var sceneWidth = 1000;
      var sceneHeight = 1000;

      var stage = new Konva.Stage({
        container: 'container',
        // first just set set as is
        width: sceneWidth,
        height: sceneHeight,
      });

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

      // add circle into center
      var circle = new Konva.Circle({
        radius: 50,
        fill: 'red',
        x: stage.width() / 2,
        y: stage.height() / 2,
      });
      layer.add(circle);

      // rectangle in bottom right of the stage
      var rect = new Konva.Rect({
        fill: 'green',
        x: stage.width() - 100,
        y: stage.height() - 100,
        width: 100,
        height: 100,
      });
      layer.add(rect);

      function fitStageIntoParentContainer() {
        var container = document.querySelector('#stage-parent');

        // now we need to fit stage into parent container
        var containerWidth = container.offsetWidth;

        // but we also make the full scene visible
        // so we need to scale all objects on canvas
        var scale = containerWidth / sceneWidth;

        stage.width(sceneWidth * scale);
        stage.height(sceneHeight * scale);
        stage.scale({ x: scale, y: scale });
      }

      fitStageIntoParentContainer();
      // adapt the stage on any window resize
      window.addEventListener('resize', fitStageIntoParentContainer);
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.