Canvas Game HUD — Animated Health Bar, Mana & XP in JavaScript

Every RPG, action game, and shooter needs a HUD. This demo builds the complete set: an animated health bar, mana bar, XP progress bar, skill cooldown slots, damage feedback, level-up effects, and a mini-map, entirely with Canvas 2D. You can adapt this system to almost any HTML5 game.

INFO

What you will build

A Canvas HUD that automatically cycles through damage, healing, XP gain, and level-up states. Bar values animate smoothly toward their targets instead of jumping instantly.

LIVE GAME UI DEMO

Canvas Game HUD - Health, Mana & XP

Watch the HUD animate through damage, healing, XP gain, and level-up states

How to build animated game bars in Canvas

Never set a HUD bar directly to the new game value if you want smooth animation. Instead, keep a displayed value and a target value. Each frame, move the displayed value toward the target.

A simple version looks like this: displayed += (target - displayed) * 0.05 . This turns instant number changes into smooth visual movement without requiring a tweening library.

The demo above uses a frame-rate-independent version of the same idea. This means the animation remains consistent even when the game runs at different frame rates.

Health color can also change dynamically. In this example, the bar is green at high health, orange at medium health, and red when health becomes critical.

Damage feedback uses a red screen tint plus a red border. The important detail is that the full-screen tint is drawn before the HUD. This keeps HP, MP, XP, cooldown numbers, and the mini-map readable during the damage effect.

hud.js KEY IDEA

// Smooth a displayed HUD value toward its target
function smoothTo(current, target, speed, dt) {
  const amount = 1 - Math.exp(-speed * dt);
  return current + (target - current) * amount;
}

displayedHP = smoothTo(
  displayedHP,
  targetHP,
  7.5,
  deltaTime
);

// Change health color by percentage
const barColor =
  displayedHP > 0.50
    ? '#35dd68'
    : displayedHP > 0.25
    ? '#ff9028'
    : '#ff3030';

Smooth interpolation plus health thresholds creates a responsive animated HUD without a tweening library.

Skill cooldown slots

Each skill stores its remaining cooldown in seconds. Every frame, subtract delta time until the value reaches zero.

The HUD converts the remaining cooldown into a value between zero and one and uses that percentage to draw a dark overlay over the skill slot.

The remaining number of seconds is drawn in the center of the slot with: Math.ceil(skill.cd) .

The icons in this demo are drawn directly with Canvas paths. They do not use emoji characters or HTML entities. This avoids font and character encoding problems that can occur when code is inserted into Blogger.

Add this HUD to your game

In a real game, the HUD should be drawn after the game world. Render your map, player, enemies, particles, and effects first, then render the HUD on top.

A typical game loop would look like this:

function frame() {

  updateGame();

  drawWorld();

  drawPlayer();

  drawEnemies();

  drawParticles();

  drawHUD();

  requestAnimationFrame(frame);

}

Keep the game's real state separate from the HUD's displayed state. For example, the game may instantly change player HP from 100 to 40 while the HUD smoothly animates its displayed value from 100 toward 40.

ADVERTISEMENT

ADVERTISEMENT