1. Veera
  2. Blog

HTML5 Canvas game - Visualizing player health

I recently built a JavaScript game for which I needed a way to visually show the player's health. The game already had a HUD where the health information was displayed. But I wanted a better way to inform about the amount of health left and I chose to implement this like a meter widget.

Below is the final result (also you can see it in live in the game):

Visualizing Player health

This post explains how to convert the player health, which is in percentage to a circle to draw in HTML5 canvas.

##Drawing circles in Canvas:

Canvas offers a method arc() to draw circles. This method's signature is:

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

In that, startAngle and endAngle is what we are interested in. By converting the health percentage to start and end angles, we can draw a arc that correlates with the percentage.

Function to convert degrees to radians:

startAngle and endAngle accepts their values in radians. But I persoanlly feel one can easily understand degrees instead of radians. So, we need a function that converts degrees to radians.

function rad(deg){
    return (Math.PI/180)*deg;
}

Function to convert percentage to radians:

Now that we have our degree-to-radian converter in place, we can move to next step of converting percentage to radians.

function percentToRad(percent){
    return rad(270) + rad ((360 * percent) / 100);
}

In the context of Canvas arc API, 0 degrees starts at circle's east end, 90 degrees is south, 180 degrees is west and 270 degrees is north. Since I wanted my arc/circle to begin at top/north, I am adding that to percentage calculation. If you want your arc to start at different end points, you can add respective degrees to the above formula.

Combining all - drawing percenate as circle in canvas

function rad(deg){
    return (Math.PI/180)*deg;
}

function percentToRad(percent){
    return rad(270) + rad ((360 * percent) / 100);
}


var ctx = document.getElementById('lifeline').getContext('2d');
function draw(x,y, percent){

    ctx.lineWidth = 5;

    ctx.beginPath();
    ctx.strokeStyle ='rgb(221,221,221)';
    ctx.arc(x,y, 45, rad(270), percentToRad(100), false);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = 'rgba(255,65,54,.8)';
    ctx.arc(x, y, 45, rad(270), percentToRad(percent), false);
    ctx.stroke();


    ctx.beginPath();
    ctx.fillStyle = 'rgb(57,204,204)';
    ctx.arc(x,y, 40, 0, 2*Math.PI, false);
    ctx.fill();
}

draw(50,50, 0);
draw(200,50, 60);
draw(50,200, 44);
draw(200,200, 100);

Here's the Fiddle where you can play around with the code and see the results for yourself and here's the JavaScript game where this has been implemented.

undefined

Written by