I'm building a game and whenever a player gets hit, it turns red so the user knows that the player was shot. The player would not die just yet since it has say 5 lives.
So whenever the player gets hit, the vector just display for an instance but the problem is that it is behind the sprite (i.e image).

How do I make it so it is in front of the sprite?
Or is there a better way of doing this?

Here's my code:
Player.hit = function(){
   ... some code ...
   ctx.fillStyle = "rgba(255,0,0, 0.5)";
   ctx.fillRect(this.x, this.y, this.w, this.h);