HTML5 canvas drop counter

Question

Hi i have a ball dropping in a html5 canvas, i would like to have a counter that displays how far the ball is dropping.

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

Someone any idea how to do this ?

Answer 1

Your shape has a position on the canvas, you should clearly define it just to be sure.

But if you want to count how your object moves on the screen you can just do:

   ball.getPosition();

This will return you a point in the form of

   {x: number, y: number}

you can save the individual x,y values like so:

   var xPosition = ball.getPosition().x;
   var yPosition = ball.getPosition().y;

you can save those positions in your animation and do a sum of how much the ball moved.