Flip Sprite Horizontally or Render New Sprite on Right/Left Key Down?

Question

"Hero" needs to get flipped horizontally (coordinate or new sprite, doesn't matter) on left/right keyDown. Including draw and keyDown sections. Where exactly would coordinate offset, or new sprite go, when left/right keyDown? Thanks in advance.

var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
    heroReady = true;
};
heroImage.src = "hero.png";

var owlReady = false;
var owlImage = new Image();
owlImage.onload = function () {
    owlReady = true;
};
owlImage.src = "owl.png";

var hero = {
    speed: 256,
    x: 0, 
    y: 0
};
var owl = {
    x: 0, 
    y: 0
};

var keysDown = {};

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true; 
}, false);

addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
}, false);

var reset = function () {
    hero.x = canvas.width / 2; 
    hero.y = canvas.height / 2; 

var update = function (modifier) {
    if (38 in keysDown) {   
    hero.y -= hero.speed * modifier;

}
if (40 in keysDown) {
    hero.y += hero.speed * modifier;
}
if (37 in keysDown) {
    hero.x -=hero.speed * modifier;

}

if (39 in keysDown) {
    hero.x +=hero.speed * modifier;
}
//collision
if ( 
    hero.x <= (owl.x + 35)
    && owl.x <= (hero.x + 35)
    && hero.y <= (owl.y + 35)
    && owl.y <= (hero.y + 35)
) {
    ++owlsCaught;
    reset();
    }
};

//DRAW 

var render = function () {
    if (bgReady) {
    context.drawImage(bgImage, 0, 0);
}
if (heroReady) {
    context.drawImage(heroImage, hero.x, hero.y);

}
if (owlReady) {
    context.drawImage(owlImage, owl.x, owl.y);
}


//game loop

var main = function () {
    var now = Date.now();
    var delta = now - then; 
    update(delta / 1000);
    render();
    then = now;
    requestAnimationFrame(main);
};

//play
var then = Date.now();
reset();
main();
</script>

Answer 1

Just use the scale() method with negative one to flip the coordinate system. You also need to think "negative" in the sense that you move the character in negative direction with the effect of actually going in positive direction after doing this.

Example:

ctx.scale(-1, 1);                      // flip hor.
ctx.drawImage(img, -x - img.width, 0); // use neg. position -image width
ctx.scale(-1, 1);                      // flip back to normal

FIDDLE

You could of course prep the character by creating an off-screen canvas the size of the image, flip the axis, draw the image flipped and use the off-screen canvas as an image source.

Update (for the new code shown)

You could use a flag to know which direction the hero is currently facing:

var flipped = false;

if (37 in keysDown) {
    hero.x -=hero.speed * modifier;
    flipped = true;
}

if (39 in keysDown) {
    hero.x +=hero.speed * modifier;
    flipped = false;
}

Then in the render function:

if (heroReady) {
    if (flipped) {
        context.scale(-1, 1);
        context.drawImage(heroImage, -hero.x - heroImage.width, hero.y);
        context.scale(-1, 1);    
    }
    else {
        context.drawImage(heroImage, hero.x, hero.y);
    }
}