HTML5-canvas: animation

Hi,

I've made an animation in the HTML5-canvas. It works perfectly. See: http://www.studio-ief.be/extra/potlood_HTML.html.

I 've put the javascript in frame 1:

this.stop();

this.knop.addEventListener("mouseover", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame()

{

  this.gotoAndPlay(2);

}

This is not what I want but I couldn't get it better. Now it starts playing on hover on. But when I hover off it continues playing. And on hovering on again it goes back to the beginning of the animation. I don't want all of that.

Can someone help me to modify the javascript-code? I want to play animation on hover on and pause it on hover off; when the animation restarts on hover on it has to go on from the point were it stopped. "knop" is the name of the instance.

Thx!