Moving an image in an canvas on page load - html

Question

Demo
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
width: 106,
height: 118
});
// add the shape to the layer
layer.add(yoda);
// add the layer to the stage
stage.add(layer);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
var amplitude = 150;
var period = 2000;
// in ms
var centerX = stage.getWidth() / 2;
var anim = new Kinetic.Animation(function(frame) {
yoda.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
}, layer);
anim.start();
How would I have the yoda image animate from left to right, say 50px, once on page load? Is it possible to do this with easing as well? Very new to canvas, thanks for any help. Would this be better suited to be left to jQuery instead?

Answer 1

If you look at console you'll see that yoda is not defined. This is happening because image.onload is a function and variables created inside a function are visible only inside that function. So you need to create yoda outside a function.
Also start the animation only after the image is loaded.
Modified Fiddle