Abilty/skill cooldown in litecanvas

code.js

litecanvas()

const DURATION = 2 // cooldown duration in seconds
let cooldown = 0 // current cooldown (0 = off)
let buttonSize

function init() {
  buttonSize = W/8
}

function tapped(tapx, tapy) {
  if (cooldown <= 0) {
    cooldown = DURATION
  }
}

function update(dt) {
  if (cooldown > 0) {
    cooldown -= dt
  }
}

function draw() {
  cls(0)

  text(10, 10, 'Tap!')
    
  // draw a white button
  rectfill(
    CX-buttonSize/2,
    CY-buttonSize/2,
    buttonSize,
    buttonSize,
    3
  )

  if (cooldown > 0) {
    const angle = TWO_PI - map(cooldown, 0, DURATION, 0, 2 * PI) - HALF_PI
    const p = path()
    
    push()
    p.rect(
      CX-buttonSize/2,
      CY-buttonSize/2,
      buttonSize,
      buttonSize
    )
    clip(p)
    arc(CX, CY, buttonSize, -HALF_PI, angle)
    fill(2);

    textsize(buttonSize/4)
    textalign('center', 'middle')
    text(CX, CY, numfmt(cooldown,1), 0)
    pop()
  }
}

function arc(x, y, radius, fromAngle, toAngle) {
  const _ctx = ctx()
  _ctx.beginPath();
  _ctx.moveTo(x, y);
  _ctx.arc(x, y, radius, fromAngle, toAngle, true);
  _ctx.closePath();
}

function numfmt(value, decimals) {
  return (+value).toFixed(decimals)
}

Live Demo