How to add background to canvas?

How add background to Konva stage?

There are two ways to add a background.

1. Adding background with Konva.Rect shape.

The Konva-way to add a background to your canvas is just by drawing Konva.Rect shape with the size of a stage on the bottom of your scene. You can style that rectangle as you want with solid color, gradient or pattern image.

The only thing that you should be careful about here is the rectangle’s position and size. If you are transforming any parent of background shape (such as stage or layer) by moving it, or applying scale you should “reset” background shape position/size to fill whole Stage area.

2. Adding background with CSS

The other solution to add background to your canvas is just use CSS styles to stage container DOM element. That solution is simpler than the first approach, because you don’t need to track position, size changes. It also has a bit better performance, because you don’t need to draw any additional shapes.

But it has one drawback. The CSS background will be not visible on export when you use methods like stage.toImage() and stage.toDataURL().

Instructions: On the demo I will show two approaches. The green solid background is made with CSS. Yellow-orange gradient will be done with Konva.Rect instance. Try to drag a stage. You will see that gradient stay on place.

Konva background demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Background 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);

      // there are two ways to add background to the stage.
      // the simplest solution is to just using CSS
      stage.container().style.backgroundColor = 'green';

      // another solution is to use rectangle shape
      var background = new Konva.Rect({
        x: 0,
        y: 0,
        width: stage.width(),
        height: stage.height(),
        fillLinearGradientStartPoint: { x: 0, y: 0 },
        fillLinearGradientEndPoint: { x: stage.width(), y: stage.height() },
        // gradient into transparent color, so we can see CSS styles
        fillLinearGradientColorStops: [
          0,
          'yellow',
          0.5,
          'blue',
          0.6,
          'rgba(0, 0, 0, 0)',
        ],
        // remove background from hit graph for better perf
        // because we don't need any events on the background
        listening: false,
      });
      layer.add(background);
      // the stage is draggable
      // that means absolute position of background may change
      // so we need to reset it back to {0, 0}

      stage.on('dragmove', () => {
        background.absolutePosition({ x: 0, y: 0 });
      });

      // add demo shape
      var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 100,
        fill: 'red',
      });
      layer.add(circle);
    </script>
  </body>
</html>
Enjoying Konva? Please consider to support the project.