I have a Kinetic JS stage and a layer

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

var layer = new Kinetic.Layer();

I've set the page color to be #bbb.

body {
        background: #bbb;
    }

I'd like to set the canvas color to be white. But I can't seem to find a method or a way to add a background color to the stage itself or the layer that I add all the object on.

I have a Kinetic JS stage and a layer

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

var layer = new Kinetic.Layer();

I've set the page color to be #bbb.

body {
        background: #bbb;
    }

I'd like to set the canvas color to be white. But I can't seem to find a method or a way to add a background color to the stage itself or the layer that I add all the object on.

• javascript
• html
• canvas
• kineticjs

5 Answers 5

You can also set the background color of your container element through CSS. That's essentially the same as setting the background color of the stage. If you want a background at the layer level, you'll need to add a filled rectangle or similar, as previously mentioned.

I had the same problem, I wanted to add a "background". I added a rectagle with the 100% height and width, with this code:

var rect = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: stageDimensions.width, //full width
            height: stageDimensions.height, //full height
            fill: 'white', //background color
        });
layer.add(rect);

Since I wanted to be able to remove the "background", this is how I manage to solve my problem.

Hope it helps you.

You can change the background color with JavaScript...

document.getElementById('container').style.background = '#fff';

There isn't an API method to add a background color.

Instead add a colored rectangle that covers the layer.

Of course, add the background rectangle before all other shapes.

Old question, but you can use the get properties of the stage, and fill a full rectangle, adding it to the layer before anything else. Sample code:

var stage = new Kinetic.Stage({
  container: 'canvas-container',
  width: 900,
  height: 450
});

// create background
var stageBg = new Kinetic.Rect({
  x: 0,
  y: 0,
  width: stage.getWidth(),
  height: stage.getHeight(),
  fill: "rgb(40,40,40)"
});

layer.add(stageBg);
stage.add(layer);