KineticJS doesn't update object's position at initial onResize call - resize

Question

This is an experiment with KineticJS and its goal is to simply keep an objected centered in the screen, as the window gets resized.
It works fine except that it doesn't center the object (a circle) at the initial resize event handler call. As I start resizing - and keep doing it - the circle gets centered. But initially the circle starts at the top left corner of the screen (0,0).
$(document).ready( function(){
$(window).resize(onResize);
var stage = new Kinetic.Stage({
container: 'container',
width: $(container).width(),
height: $(container).height()
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ radius: 70, fill: 'red' });
layer.add(circle);
stage.add(layer);
function onResize(){
$(container).css('height', window.innerHeight - 20);
stage.setWidth($(container).width());
stage.setHeight($(container).height());
updatePosition();
}
function updatePosition(){
circle.setPosition(stage.getWidth() / 2, stage.getHeight() / 2);
}
// initial call
onResize();
});
Any clue on why that happens? Thanks

Answer 1

http://jsfiddle.net/ME2cX/2
Yeah, you are missing a call to draw the stage after the onResize function is called.
Your order of events is to add things to the stage, then place the circle in the center, but the stage (or layer) needs to be drawn again to account for the new position of the circle.
In the jsfiddle, I placed 3 draw functions, I recommend you choose one of the
layer.draw()
functions rather than the
stage.draw();