# 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):

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){
}
``````

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;
}

}

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

ctx.lineWidth = 5;

ctx.beginPath();
ctx.strokeStyle ='rgb(221,221,221)';
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = 'rgba(255,65,54,.8)';
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``