could you explain me why in my code it does not work when I put the ball with the mouse inside red road path.


I think it 'thinks' that the space inside red is not empty and pushes the ball out. What could I do?
I was making this from example:


You can copy the code from here to run the example:


and shorter version:

var curve = new Kinetic.Line({  //578*400 (x * y)
          points: [153, 200, 340, 250, //down
                  340, 270,   //short to bottom
                  153, 290,  //back to left
                  153, 320,  //short to bottom
                  390, 290,     //to the right long
                  390, 220,        //up short
                  153, 140,  //long to the left
                  153, 200   //short to bottom

          stroke: "red",
          strokeWidth: 5,
          lineCap: "round",
          lineJoin: "round"

So this ball has to ride inside the red area. How do I make this?

Not to read your code but from what I see, the location of the ball is the center. Your script is checking the location of the red line against the center of the ball, not the edge of the ball. As a result, the location which is supposed to be the edge of the ball does not touch the red line but the center point. You will need to compute the distance of the center point to the edge of the ball, and use that (radius distance) when you draw.

PS: You may need to find the closest distance from the center to the point on the red line each time the animation frame in order to make it roll along the red line.

thanks for the response. I took the more simple way - without that colition detection. Just hardcoded the path for going ball. Of course this is problem when I will want to change the path of the ball. In this example ball would just act according to the "terrain" but this looked bit complicated when I am not experienced with animations much.