4 Replies Latest reply on Apr 3, 2017 8:00 AM by ClayUUID

    Behavior of object persisting after leaving frame (HTML5 Canvas)




      I am new to the HTML5 Canvas, and I'm having an issue with object behavior. Specifically object behavior continuing after leaving a frame.


      I have two frames in the canvas, the first labeled "Menu" and the second labeled "Animation".


      In the Animation frame, I have the following code which moves a ball horizontally across the screen, then looping it back around after it leaves the stage.


      var widthMax = stage.canvas.width;

      var dx = 1;


      this.ball.addEventListener("tick", fl_ballMove.bind(this));


      function fl_ballMove(){


           this.ball.x += dx;


                if (this.ball.x > widthMax) {


                     this.ball.x = 0;




      Whenever I go to the previous frame (Menu) then back to the Animation frame the ball begins moving faster. Is the behavior continuing and the dx variable being applied on top of the current behavior? Is there any way to cease the objects behavior upon leaving the frame?


      Sorry for the newbie question, I'm very new to Animate and createJS. Any help is appreciated, thank you.