title: Flip image and the line drawed in HTML5 canvas
body: <p>I am using canvas loading an image. draw some lines on the image. Then I want to click a "flip" button to flip the image and the lines I just draw. The code is <a href="http://jsfiddle.net/pfzAY/3/" rel="nofollow">here on jsfiddle</a>.</p>
  
  <p>My current problem is: </p>
  
  <ol>
  <li>The lines I draw won't get flipped but the image is flipped after I
  click the "flip" button. </li>
  <li>The lines wont' show up immediately after I
  click the "flip" button. The lines will show when I start to draw
  again.</li>
  </ol>
  
  <p>Any help will be appreciated.</p>
  
  <p>Thanks,</p>
  
  <pre><code>var context;
  var canvas;
  var imageObj = new Image();
  var flipH = true;
  var flipV = true;
  var scaleH = 1,
      scaleV = 1;
  var posX = 0,
      posY = 0;
  var isDrawingFreeDraw;
  
  
      canvas = document.getElementById('myCanvas');
      context = canvas.getContext('2d');
      context.strokeStyle = "#FFFF00";
      //context.save();
      canvas.addEventListener('mousedown', MouseDown, true);
      canvas.addEventListener('mouseup', MouseUp, true);
      canvas.addEventListener('mousemove', MouseMove, true);
      imageObj.src = 'http://upload.wikimedia.org/wikipedia/commons/1/1a/Image_upload_test.jpg';
  
  
      imageObj.onload = function () {
          context.drawImage(imageObj, posX, posY, canvas.height * imageObj.width / imageObj.height, canvas.height);
      };
  
  
      console.log(context);
  
  
  $(document).on('click', '#FlipH', function () {
      console.log("Flip Me");
      //    context.restore();
      context.save();
      //canvas.width = 100;
      scaleH = flipH ? -1 : 1;
      context.scale(scaleH, scaleV);
      posX = flipH ? (canvas.height * imageObj.width / imageObj.height) * -1 : 0;
      context.drawImage(imageObj, posX, posY, canvas.height * imageObj.width / imageObj.height, canvas.height);
      flipH = !flipH;
      context.scale(1, 1);
      //console.log(context);
  
      context.restore();
  
  });
  
  
  
  function MouseUp(e) {
      isDrawingFreeDraw = false;
      context.save();
  
  }
  
  function MouseDown(e) {
      context.save();
  
      isDrawingFreeDraw = true;
      console.log(e);
      context.moveTo(e.pageX, e.pageY);
      context.restore();
  
  }
  
  function MouseMove(e) {
      if (isDrawingFreeDraw) {
          context.save();
  
          context.lineTo(e.pageX, e.pageY);
          context.stroke();
          context.restore();
  
      }
  }
  </code></pre>