Image disappears when making a flip on Sprite

Question

I am developing in HTML5 but am having the following problem a sprite makes the moves to the right, but when I try to give the flip on it to make the image appear left-facing using ctx.scale(-1, 1); The image just doesn’t appear, it follows the code that keeps updating all the time.

Oele is entering the if of walk_left normally. The code works, I didn’t get it all so it’s not with the Javascript tags. The only thing that’s not working is the walk to the left, when I walk to the left the picture just disappears.

function redraw()
{
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    var w = img.naturalWidth / 8;
    //  var largura_frame = (w);
    //  var altura_frame = ;
    // posx = 100;
    // var posy = 100;
    var rect_img_height = (img.naturalHeight / 8) - 3;
    var rect_img_width = (w) - 2;
    var rect_height = (img.naturalHeight / 8);
    var rect_width = img.naturalWidth / 8;
    var rect_posx = frame * (img.naturalWidth / 8) + 1;
    //      var rect_posy = 120  ;
    var rect_posy = null;

    ctx.drawImage(bgImg, 0, 0, bgImg.naturalWidth, bgImg.naturalHeight, 0, 0, canvas.width, canvas.height);
    if (imageReady)
    {
        if (walk_right == 1 && walk_left == 0)
        {
            rect_posy = 120;
            ctx.drawImage(img, rect_posx, rect_posy, rect_img_width, rect_img_height, posx, posy, rect_width, rect_height);
        }
        else if (walk_left == 1 && walk_right == 0)
        {
            rect_posy = 120;
            //posx = posx * -2
            ctx.save(); // Save the current state
            ctx.scale(-1, 1);
            //posy = 100; posx = 100;
            ctx.drawImage(img, rect_posx, rect_posy, rect_img_width, rect_img_height, posx, posy, rect_width, rect_height);
            ctx.restore();
        }
        else
        {
            rect_posy = 257;
            ctx.drawImage(img, 162, rect_posy, rect_img_width, rect_img_height, posx, posy, rect_width, rect_height);
        }

        ctx.font = "30px Arial";
        ctx.fillText('pos x: ' + posx, 150, 130);
        ctx.fillText('img heigth ' + bgImg.height, 150, 150);

        ctx.fillText('canvas width ' + canvas.width, 150, 180);
        ctx.fillText('canvas heigth ' + canvas.height, 150, 200);
    }
}

Answer 1

Well scale negative works, only it totally reverses the coordinates, being that if you arrow scale x as negative you must change the coordinates of the objeto concerning x for negatives.

In your case you should edit these positions regarding x to negatives:

ctx.drawImage(img, rect_posx, rect_posy, rect_img_width, rect_img_height, posx, posy, rect_width, rect_height);

Follows example