title: Flip a sprite in canvas
body: <p>I'm using canvas to display some sprites, and I need to flip one horizontally (so it faces left or right). I can't see any method to do that with <code>drawImage</code>, however.</p>
  
  <p>Here's my relevant code:</p>
  
  <pre><code>this.idleSprite = new Image();
  this.idleSprite.src = "/game/images/idleSprite.png";
  this.idleSprite.frameWidth = 28;
  this.idleSprite.frameHeight = 40;
  this.idleSprite.frames = 12;
  this.idleSprite.frameCount = 0;
  
  this.draw = function() {
          if(this.state == "idle") {
              c.drawImage(this.idleSprite, this.idleSprite.frameWidth * this.idleSprite.frameCount, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight, this.xpos, this.ypos, this.idleSprite.frameWidth, this.idleSprite.frameHeight);
              if(this.idleSprite.frameCount &lt; this.idleSprite.frames - 1) { this.idleSprite.frameCount++; } else { this.idleSprite.frameCount = 0; }
          } else if(this.state == "running") {
              c.drawImage(this.runningSprite, this.runningSprite.frameWidth * this.runningSprite.frameCount, 0, this.runningSprite.frameWidth, this.runningSprite.frameHeight, this.xpos, this.ypos, this.runningSprite.frameWidth, this.runningSprite.frameHeight);
              if(this.runningSprite.frameCount &lt; this.runningSprite.frames - 1) { this.runningSprite.frameCount++; } else { this.runningSprite.frameCount = 0; }
          }
      }
  </code></pre>
  
  <p>As you can see, I'm using the <code>drawImage</code> method to draw my sprites to the canvas. The only way to flip a sprite that I can see is to flip/rotate the entire canvas, which isn't what I want to do.</p>
  
  <p>Is there a way to do that? Or will I need to make a new sprite facing the other way and use that?</p>