Controlling fps with HTML Canvas

[BioME]

I'm trying to incorporate buttons into HTML Canvas, that will allow users to speed up or slow down my animated lesson.  I was able to do this with Adobe Animate using the following code.  Obviously Action Script won't work with HTML Canvas; I'm just including it here to demonstrate where I'm starting and hopefully make it clearer what I want to do.

var togSLOW:Number = 10;

BTN_sButtonLabel.addEventListener(MouseEvent.CLICK, sButtonLabel);
function sButtonLabel(event:MouseEvent):void
{ togRATE = !togRATE;
stage.frameRate = togSLOW;
}
 

I've searched this Community Forum using various search terms such as "frame rate" and "fps," but I didn't find any conversations that answered my question.   I'm probably just not using the correct search terms.  Anyway, if someone could provide guidance I would really appreciate it.

[JoãoCésar]

Hi.

In the HTML5 Canvas document, each Movie Clip instance can have a different FPS. So, for example, you could code something like this:

var root = this;
var anim = root.anim; // the anim can be the main timeline itself
var button = root.button;
var slowFPS = 10;

button.on("click", function(e)
{
	e.currentTarget.toggled = !e.currentTarget.toggled;
	anim.framerate = e.currentTarget.toggled ? slowFPS : lib.properties.fps;
});

I hope it helps.

Regards,

JC