Rendering shapes and drawings via the canvas in MelonJS

I've been using Melon JS for some months now to cure my various HTML5 itches. Messing around with it, I needed to render a health bar above an enemy. Libraries like LibGDX give you a shape renderer. Where you specify what kind of shape you wish to draw, you configure the colour, etc. It's a very similar structure to that of the canvas API.

Due to how MelonJS manages your objects on the screen, you can't just get the canvas context and draw as you like. Chances are your objects will be drawn on top of that. This is a pretty big issue if you use things like Tiledmap and so forth, where the background will get drawn on top of your shapes.

Luckily there's a pretty simple solution. As I said, this was to draw enemy health bars. So preferably, I'd like to keep the health bar drawing with the logic of my ObjectEntity. The ObjectEntity class has a draw function available. Normally it's not used, as when you setup animations and a sprite, it's usually not needed.

Here's the code to set it up:

Game.Enemy = me.ObjectEntity.extend({
init:function() {
var settings = {
spritewidth: 128,
spriteheight: 128,
image: "enemy"
};
this.updateColRect(40, 46, -1);
this.parent(100, 100, settings);
this.health = 10;
this.maxHealth = 10;
},

draw: function(context, rect) {
this.parent(context, rect);
this.drawHealth(context);
},
drawHealth: function(context) {
var percent = this.health / this.maxHealth;
var width = this.getCollisionBox().width;
context.fillStyle = 'green';
context.fillRect(this.getCollisionBox().x, this.pos.y - 12, width, 10);
},
getCollisionBox: function() {
return {
x: this.pos.x + this.collisionBox.colPos.x,
y: this.pos.y + this.collisionBox.colPos.y,
width: this.collisionBox.width,
height: this.collisionBox.height
};
},
});

To explain this code, the init function is just showing the bare minimum, but essentially im updating the collision rectangle to just surround the visible enemy.

The draw function is passed two parameters when invoked, so they must be forwarded to the super class draw. I then call my drawHealth method which uses the canvas api to draw a rectangle. I use my custom method to get the collision box positioning so I can position the rectangle accordingly.

And that is basically it. This might change over time due to MelonJS still being in its early stages. But as of now, it's a relatively simple way to draw shapes rather than render bitmaps.