Rotating layer or Image with offset in kineticjs

Question

I have a kineticjs application that consists of the following

1. the kineticjs stage
2. one backgroundLayer a kineticjs layer and
3. a backgroundImage a kineticjs image

My stage has fixxed size 800x600

//global variables
var stageWidth = 800;
var stageHeight = 600;

stage = new Kinetic.Stage({
    width: stageWidth,
    height:stageHeight,
    container: 'container',
    x: 0,
    y: 0
});

my backgroundLayer has also fixed size and is on top of stage

backgroundLayer = new Kinetic.Layer({
    width:stageWidth,
    height: stageHeight,
    x: 0,
    y: 0,
    draggable: false,
    offset: [stageWidth / 2, stageHeight / 2]

});

my Kineticjs image's size depends on the image size. So if the image is vertical It has height of 600 and adapts is width according to the ratio of the stage dimensions. It does this the same way when the image is portrait

function initializeImage(id){
    var domImage = $("#"+id);
    var imageSrc = domImage.prop('src');
    imageObj = new Image();
    imageObj.src = imageSrc;
    if (imageWidth > imageHeight){
        imageWidth = stageWidth;
        imageHeight = imageWidth / ratio;
        imageY = (stageHeight - imageHeight) / 2;
    }else{
        imageHeight = stageHeight;
        imageWidth = stageHeight / ratio;
        imageX = (stageWidth - imageWidth) / 2;

    }
    domImage.remove();

}

Then I initialize thei kinetijs image object as follows

imageObj.onload = function (){
    backgroundImage = new Kinetic.Image({
        image:imageObj,
        width:imageWidth,
        height:imageHeight,
        x:imageX,
        y:imageY

    });

and I add them at the following order

backgroundLayer.add(backgroundImage);        
stage.add(backgroundLayer);

My problem is when I try to rotate either the Image or the Layer rotating using offset won't work. I encounter the following problems

1. background.offset() returns {x:0, y:0}, even though I set it up on creation to be different
2. I set the offset manually on the Layer and rotate 10 deggrees and won't rotate on the center of the layer. Instead the layer is drown to the upper left corner and the image dissappears.

Is there something wrong with my code?Have I not understood something correctly?

Answer 1

Looks like you need to change API (you have to pass object, not an array):

offset: {
  x : stageWidth / 2,
  y : stageHeight / 2
}