如何使用requestAnimationFrame水平翻转画布方法绘制的图像？

Question

我正在执行一个Sprite Sheet动画代码，其中有Sprite Sheet可以向右行走，但是现在我希望它朝相反的方向行走。因此，我想知道有什么方法可以使用javascript而不是使用photoshop来实现。这是我的代码：

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);
  }
}

我到处搜索并找到了使用缩放的方法，但是它似乎不起作用。任何帮助都可以，谢谢！