move an object inside canvas

[Kumar]

I have created Bezier curve using Canvas and added a div (square box) to it. Now when I am trying to move the div along Beizer curve the CO-Ords its considering are wrt to the div outside of it but not the Canvas element. So its ending up in a different curve compared to the actual curve drawn on the Canvas.

 

Is there any example of moving objects drawn using Canvas?

 

Starting point { x: 0, y: 0 }

Control point 1 { x: 1, y: 50 }

Control Point 2 { x: 200, y: 400 }

End point { x: 400, y: 50 }

 

var playBtn = document.getElementById("playBtn");
        playBtn.onclick = function () {
            if (document.getElementById("box") != null) {
                var tween1 = TweenMax.to(document.getElementById("box"), 5, {
                    bezier: { type:"cubic", values: [{ x: 0, y: 0 }, { x: 1, y: 50 }, { x: 200, y: 400 }, { x: 400, y: 50 }], autoRotate: false },
                    ease: Power1.easeInOut
                });

                tween1.play();
            }
        };

 

Thanks,

Kumar.

[jamiejefferson]

My guess is this could probably be fixed with some CSS positioning so that the #box coordinates are already lined up with the canvas, but I don't know how your files are setup.

 

Could you post a simple demo of this on http://codepen.io, http://jsfiddle.net or http://jsbin.com/ so we can see where the problem is and come up with a good solution for you?

[Kumar]

Problem is with position of div that's supposed to move. Sorted it by placing it correctly.

 

See the Pen kvpax by pannamraju (@pannamraju) on CodePen.

 

But when the page loads the animation starts automatically. Am I missing any setting so it will start only after clicking play button?

[jamiejefferson]

Ah glad you sorted out the div positioning then.

 

All timelines will start playing by default, but you can tell them to start paused like this:

var t1 = new TimelineLite({ paused:true });