How to set initial stage color in Konva?

I'm just starting with Konva and I wonder if there is a way to set the stage color? It is some kind of bright grey by default and I would like to change that, if possible, without having to add a rectangle and fill it.

Solution

Konvajs is an implementation of functions on top of the standard HTML5 canvas.

If you google html5 canvas background color you will find many hits including for example how-to-fill-the-whole-canvas-with-specific-color on SO. The summary is:

html5 canvas is transparent
either set the colour on the host element via CSS,
or generate a rectangle shape on its own layer with the rectangle dimensions filling the canvas.

Here is an example of using the CSS colour on the container div to colour the stage. I also added a stage rectangle which you could use instead by adding a fill colour to its definition. The stage rectangle is listening for clicks and has a click handler so that you can confirm it covers the entire stage area. The stage has a contentClick() listener that should be used with care because bubbling cannot be stopped.

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


var rectButtonClicked  = false;

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

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

var stageRect =  new Konva.Rect({ 
  x:0,
  y:0,
  width: width,
  height: height,
  listening: true  // listen for clicks on the stage rectangle
})
layer.add(stageRect);

stageRect.on('click', function() {
  console.log('Stage click');
});

stageRect.draw(); // draw so we can see canvas rect.

<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>

<div id="container" style="background-color: gold;"></div>