Making a kineticjs layer without a background

Question

I currently have some javascript that receives an image from a variable and loads it into the canvas. The canvas is inside a div in order to use kineticjs. I'm loading a regular hexagon with the following code:

function MakeShape()
  {
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 490,
    height: 225
  });
  var polyLayer = new Kinetic.Layer();

var hexagon = new Kinetic.RegularPolygon({
    x: stage.width()/2,
    y: stage.height()/2,
    sides: 6,
    radius: 70,
    fill: 'red',
    offset: {
      x: 100,
      y: 0
    },
    draggable: true
  });

  polyLayer.add(hexagon);
    stage.add(polyLayer);
  }

However, when loading, the layer receives the background of the canvas, when I want the shape to be above the image. Do I have to draw the image onto the layer as well as the shape? How am I supposed to do this when the image is loaded before the shape? Thanks.

Answer 1

I'm not sure what you mean by "javascript receives an image from a variable and loads it into the Canvas". I'm guessing that your Canvas element's is assigned a background-image==that image.

Anyway, new Kinetic.Stage plus new Kinetic.Layer will create a new canvas that covers the container element. So any image you put in your Div and Canvas will be overlaid by the new Canvas that KineticJS creates.

Bottom line...Yes, draw the image onto the layer (using new Kinetic.Image) and eliminate your Canvas element with the image.

Good luck with your project!

[ Added Example code ]

var stage = new Kinetic.Stage({
  container: 'container',
  width: 490,
  height: 225
});
var polyLayer = new Kinetic.Layer();
stage.add(polyLayer);

var hexagon,image1;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/nightscape.jpg";
function start(){

  // add the image first
  // It's z-index will be lower then the hexagon's z-index
  // so the hexagon will be drawn over the image
  image1=new Kinetic.Image({
    x:0,
    y:0,
    image:img,
  });
  polyLayer.add(image1);
  
  hexagon = new Kinetic.RegularPolygon({
    x: stage.width()/2,
    y: stage.height()/2,
    sides: 6,
    radius: 70,
    fill: 'red',
    offset: {
      x: 100,
      y: 0
    },
    draggable: true
  });
  polyLayer.add(hexagon);



  polyLayer.draw();

}

body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:490px;
  height:225px;
}

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<h4>Background image with draggable hex on top.</h4>
<div id="container"></div>