• KineticJS

KineticJS Lab – Updating Interactive Ball Physics To KineticJS 3.10.2

I’ve recently started playing around with CSS3 Animations and WebGL (less WebGL because I find it too complicated for me without any real graphics knowledge. But we will get back to that sometime). In my experiments I came across an awesome Canvas Javascript Library called KineticJS. I found it very easy to use and you can find many tutorials and examples on the website.

As a part of launching this new website i wanted to add a nice demo of some animation on my website without messing too much with complex animations. I’ve decided to use the “HTML5 Canvas Interactive Ball Physics” from the Lab page and add some special sauce to it that will attract people’s attention when they come into the site (The idea was to add a basketball hoop and let people try to score and show something when they did).

The problem I quickly came across was a lot of the Lab examples were using older Kinetic Libraries and were getting errors when updating. In my case the demo was using v3.7.4 when v3.10.2 is out already.

It didn’t took to much to fix this and i’ve decided to post this so other people can take this quick fix and be compatible to the latest version so here goes:
You can view the fixed version here: Updated HTML5 Canvas Interactive Ball Physics

1) In the window.onload function on line 113 from the original code you can see the following:

var stage = new Kinetic.Stage("container", 578, 200);

The Stage call was change and now needs to be as follows:

var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200

2) on line 118 we create a new Shape (basically we are creating a Circle and later KineticJS versions have a Circle Shape!)

var ball = new Kinetic.Shape(function(){
var context = this.getContext();
context.arc(0, 0, radius, 0, 2 * Math.PI, false);
context.fillStyle = "blue";

This needs to be change into

var ball = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: radius,
fill: "blue",
stroke: "black",
strokeWidth: 1,

3) on line 144 (of the original code) we are setting the position of the ball to be in the middle of the stage

ball.setPosition(stage.width / 2, stage.height / 2);

stage does not have a height and widget properties anymore and it can now be fetch with a function called getWidth and getHeight

ball.setPosition(stage.getWidth() / 2, stage.getHeight() / 2);

4) line 146 is setting the ball to have drag and drop capabilities by using the draggable function which was also changed into setDraggable()


Should change to


5) in the function updateBall on lines 37 and 38 we are getting the ball x and y positions by trying to accessing the x,y properties, those properties are no longer available in the root of the ball object and are placed inside the attrs object inside the ball object so this code

var ballX = ball.x;
var ballY = ball.y;

Need to changed into

var ballX = ball.attrs.x;
var ballY = ball.attrs.y;

6) there are 2 more errors inside the updateBall function and i thought to make things shorter (this is a long post anyway already) i will just sum them into one bullet. on line 48 we are trying to see if the ball is moving and if so we need to save the mouse positions (we will not get into why) this is done by trying to access the drag object inside the ball object and there is no such object in KineticJS 3.10.2

if (ball.drag.moving) {

This code need to be change into
if (ball.isDragging()) {
by using the isDragging function that was added we can check if the ball is dragging or not.
the next thing we already covered here is there are a few moer places in updateBall that use stage.height and stage.width, like i’ve written here they are no longer available in KineticJS 3.10.2 and you will need to use the stage.getWidth() and stage.getHeight().

Everything should work exactly like the original demo after these changes.
To make it easier for people I’ve created this page with demo: Updated HTML5 Canvas Interactive Ball Physics


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>