Image disappears while doing a flip on the sprite

I'm developing in HTML5 but I'm having the following problem a sprite does the right moves, but when I try to give the flip on it to make the image display left facing using ctx.scale(-1, 1); The image simply does not appear, it follows the code that keeps updating all the time.

He is entering if of walk_left normally. The code works, I did not get it all so it's not with the JavaScript tags. The only thing that is not working is the floor to the left, when I walk to the left the image simply 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);
    }
}