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

Chat with the Author

This post was written by Veera, a software developer by profession and a maker by passion.

You will be taken to twitter.com where you can edit the tweet before posting.

If you liked my writing, you may like my products