create stopwatch in HTML5 canvas

Since you mentioned an experiment simulation where certain moments need to be recorded, here's a complete frame script for Animate (HTML5 Canvas) that does start / stop / reset plus "mark" points you can read back later.

Stage setup (instance names matter):

• timeTxt: dynamic text field for the running time
• lapTxt: multiline dynamic text field for the recorded points
• startBtn, stopBtn, resetBtn, markBtn: button symbols

Frame 1 Actions:

this.stop();
var root = this;

// Guard so listeners aren't added twice if the playhead ever returns to this frame
if (!root.swReady) {
  root.swReady = true;

  var startTime = 0;      // clock value when the current run started
  var accumulated = 0;    // ms collected from earlier runs (before Stop)
  var running = false;
  var marks = [];         // recorded points, in ms

  function now() { return performance.now(); }

  function elapsed() {
    return running ? accumulated + (now() - startTime) : accumulated;
  }

  function pad(n) { return (n < 10 ? "0" : "") + n; }

  function format(ms) {
    var cs = Math.floor(ms / 10);              // hundredths
    var h = Math.floor(cs / 360000);
    var m = Math.floor(cs / 6000) % 60;
    var s = Math.floor(cs / 100) % 60;
    return (h ? h + ":" : "") + pad(m) + ":" + pad(s) + "." + pad(cs % 100);
  }

  function render() { root.timeTxt.text = format(elapsed()); }

  createjs.Ticker.on("tick", render);
  render();

  root.startBtn.on("click", function () {
    if (!running) { startTime = now(); running = true; }
  });

  root.stopBtn.on("click", function () {
    if (running) { accumulated += now() - startTime; running = false; render(); }
  });

  root.resetBtn.on("click", function () {
    running = false; accumulated = 0; marks = [];
    root.lapTxt.text = ""; render();
  });

  root.markBtn.on("click", function () {
    var t = elapsed();
    if (t === 0) return;
    var split = t - (marks.length ? marks[marks.length - 1] : 0);
    marks.push(t);
    root.lapTxt.text += "Point " + marks.length + ": " + format(t) +
                        "  (+" + format(split) + ")\n";
    console.log(JSON.stringify(marks)); // raw ms values for your results
  });
}

A few notes on why it's written this way:

1. Don't count ticks or intervals. A common approach is setInterval(fn, 10) and adding 10 ms each call, but timers fire late and browsers throttle them in background tabs, so the stopwatch drifts. Here the time is always computed from performance.now(), and the Ticker only redraws the text. Even at 24 fps the displayed value is correct, it just refreshes 24 times a second.
2. Pause/resume works because the time from earlier runs is kept in accumulated, so Start after Stop continues instead of restarting.
3. Recorded points are stored as raw milliseconds in the marks array. If your simulation needs to log a moment by itself (not from a button), just call the same logic, e.g. marks.push(elapsed()), from wherever that event happens.
4. The swReady guard matters in Animate: frame scripts run again whenever the playhead re-enters the frame, and without it every button would fire twice, three times, and so on.

If it helps to have a reference to compare the display format and mark/split behaviour against while testing, I use the online stopwatch on my own site (full disclosure, I built it). Hope this gets your experiment running.

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:

• 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:

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