Skip to main content
Inspiring
June 27, 2022
Question

create stopwatch in HTML5 canvas

  • June 27, 2022
  • 2 replies
  • 525 views

Hi, guys. I'm struggling with my project in adobe animate, I need to make a stopwatch. And I need some point of the time to be noted or called or recorded. I have no clue how to make it. I just found several answers about countdown timers and don't understand it. I'm new to adobe animate canvas. would anyone please help me? Thank you.

    2 replies

    Participant
    August 31, 2025

     

    If you’re just getting started with Adobe Animate (HTML5 Canvas), the basic idea for a stopwatch is to use JavaScript’s setInterval() to update a counter, and then display that counter in a text field on stage. You can also log or “record” specific time points by pushing the counter values into an array whenever a button is clicked.

    Something like this pseudo-example:

     

     
    var time = 0; var timer; var recorded = []; function startWatch() { timer = setInterval(function() { time++; this.stopwatchTxt.text = time + "s"; stage.update(); }.bind(this), 1000); } function stopWatch() { clearInterval(timer); } function recordPoint() { recorded.push(time); console.log("Recorded times:", recorded); }
     
    • startWatch() begins the counter.

    • stopWatch() pauses it.

    • recordPoint() saves the current time into a list.

    This way you can “note” or “call” specific points in time during the stopwatch run.

    If you’d like to explore more about counters and timers, you can also check resources like:

    Participant
    August 31, 2025

    Also I suggest you to preview https://kronometreonline.tr if you are interested how stopwatch actually works.

    kglad
    Community Expert
    Community Expert
    June 27, 2022

    are you asking for this to be down for you, or do you have specific questions?

    Inspiring
    June 27, 2022

    thank you for your response, I want to ask about how to make a stopwatch in adobe animate html5 canvas, I wish I can have the guideline and the script for this. I really need this for my experiment simulation that I create using adobe animate. thank you.

    kglad
    Community Expert
    Community Expert
    June 27, 2022

    for the benefit of others, as mentioned in my reply to your private message, if you want me to code this for your, i will charge you.  if you want me (and possibly others) to help you with problems you encounter when trying this on your own, you can be helped for free via the adobe forums.

     

    to best utilize coding help via the forums, you should use relatively small snippets of code (eg, less than 20 lines) and explain what you're trying to accomplish with the snippet and what problem you're seeing.