Как перевернуть изображение по горизонтали, нарисованное методом canvas, используя requestAnimationFrame?

Question

Я делаю код анимации листа спрайта, где у меня есть лист спрайта для правильной ходьбы, но теперь я хочу, чтобы он шел в противоположном направлении. Поэтому мне интересно, есть ли способы сделать это в javascript вместо того, чтобы делать это в фотошопе. Вот мой код:

requestAnimationFrame(drawSheet);
document.onkeydown = function(event) {

    if (event.keyCode == 39) {
        catState = cat.walkright;
        cat.x+=3;
    }
    else if (event.keyCode == 37) {
        flip = true;
        catState = cat.walkleft;
        cat.x-=3;
    }
}

document.onkeyup = function() {
    catInterval = setInterval(checkDone, 1)
    flip = false;
}

function drawSheet() {

  ctx.clearRect(0, 0, width, height)

  if (flip == true) {
    ctx.save();
    ctx.translate(cat.x, cat.y);
    ctx.scale(-1, 0); 
  }
  ctx.drawImage(cat.image, frame * 64, catState.index * 64, 64, 64,    cat.x, cat.y, 64, 64);

  ctx.restore();

  if (Date.now() - time >= delay) {
    if (frame >= catState.frames) {
      frame = 0;
    }
    else {
      frame++;
    }
    if ((Date.now() - time - delay) > delay) {
      time = Date.now();
    }
    else {
      time += delay;
    }
  }

  requestAnimationFrame(drawSheet);
}

function checkDone() {
  if ( frame == 0 ) {
    catState = cat.idle;
    clearInterval(catInterval);
  }
}

Я искал и нашел этот метод, где вы используете масштабирование, но, похоже, он не работает. Любая помощь будет, спасибо!