timerevent in html5 canvas

[berkay1587]

Good day, 

I am trying to do dynamic text. When I press button, it will start to increase or decrease, or implement function according to value?   

I used to do this AS3 but I can not do it in html5 canvas document.

How can I use a timer event in html5 canvas document?

Is there a list of all these functions in html5 canvas? 

some example in AS3, I need in html5 canvas

import fl.motion.MotionEvent;

var sayacTimer:Timer=new Timer(100);
sayacTimer.addEventListener(TimerEvent.TIMER,colsayac);

var sayac:Number=4;
function colsayac(evt:TimerEvent):void {
sayac-=.08;
sayac=(Math.round(sayac*100))/100;
sayac_txt.text=String(sayac);
if(sayac==-30)
{
sayacTimer.stop();
}
}

play_btn.addEventListener(MouseEvent.CLICK,startTimer);
stop_btn.addEventListener(MouseEvent.CLICK,stopTimer);

function startTimer(evt:MouseEvent):void {
sayacTimer.start();
}

function stopTimer(evt:MouseEvent):void {
sayacTimer.stop();
}

[Colin Holgate]

AS3 always had a thing called setTimeout(). You can read about it here:

https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/utils/package.html#setTime...

If you can rethink things so that you do the next action after some amount of time, and while doing that you set up the next action, the same tehnique will work in HTML5 Canvas.

[berkay1587]

Thanks but I do not need a delay. 

I need a timer ( on dynamic text) which counts from the defined value (+ or -). So I can set different functions( like play movie clips) to different values.

It`s an engineering animation that contains different math values.

[ClayUUID]

Are you really going to make us explain to you that a timer and a delay are the same thing?

If you need a delay that repeats automatically, I suppose you could use setInterval() instead.

[berkay1587]

I tried to use setTimeout and setinterval but "addEventListener(TimerEvent. in Action script 3.0" is additionally check value of timer and implement function according to its value like in the example. 

setinterval() and setTimeout() does not do that.

Important part for me is not timer, it is "listening its value and implementing other functions according to its value."

I think right answer will be with tweenCount and tween get. I'll try.

[ClayUUID · Accepted solution]

Nothing in the code you posted checks the value of the timer. You're just checking and modifying a local variable. This canvas code is functionally identical to what you posted:

var sayacTimer = 0;
var sayac = 4;
var _this = this;

function colsayac() {
	sayac -= .08;
	_this.sayac_txt.text = Math.round(sayac * 100) / 100;
	if (sayac <= -30) {
		clearInterval(sayacTimer);
		sayacTimer = 0;
	}
}

this.play_btn.addEventListener("click", startTimer);
this.stop_btn.addEventListener("click", stopTimer);

function startTimer() {
	if (!sayacTimer) {
		sayacTimer = setInterval(colsayac, 100);
	}
}

function stopTimer() {
	clearInterval(sayacTimer);
	sayacTimer = 0;
}

Using tweens for timer functionality would be nuts.

[ClayUUID]

"Is there a list of all these functions in html5 canvas?"

Yes. Animate in HTML5 Canvas mode uses the CreateJS library for everything.

https://www.createjs.com/docs

But doing something after a set amount of time is just vanilla JavaScript functionality.

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

[berkay1587]

It seems createjs does not have something like ".addEventListener(TimerEvent.`"

I need a timer ( on dynamic text) which counts from the defined value ( and increase or decrease as I set). So I can set different functions( like play movie clips) to different values of timer.

It`s an engineering animation that contains different math values.

[berkay1587]

https://community.adobe.com/t5/animate/countdown-timer-with-canvas/m-p/9994653?page=1#M183701

There is a sample countdown here but I can't set different functions of different values of this timer.