title: canvas, 2 lineTo-paths at the same time
body: <p>I want to draw a line and while doing so, at the same time the line shall be drawn horizontal reflected. So the User is doing like 2 Strokes. The problem is that a canvas has only one context-object, that cannot be used by two separate lineTo-commands. How can I approach this issue, or would this need an animation frame?</p>
  
  <p>here the code for one lineTo:</p>
  
  <p>[link] <a href="http://jsfiddle.net/FgNQk/1/" rel="nofollow">http://jsfiddle.net/FgNQk/1/</a></p>
  
  <pre><code> var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      var width  = window.innerWidth;
      var height = window.innerHeight;
      canvas.height = height;
      canvas.width = width;
      canvas.addEventListener('mousedown', function(e) {
          this.down = true;   
          this.X = e.pageX ;
          this.Y = e.pageY ;
          this.color = rgb();
      }, 0);
      canvas.addEventListener('mouseup', function() {
          this.down = false;          
      }, 0);
      canvas.addEventListener('mousemove', function(e) {
  
          if(this.down) {
               with(ctx) {
                  beginPath();
                  moveTo(this.X, this.Y);
                  lineTo(e.pageX , e.pageY );
                  strokeStyle = "rgb(0,0,0)";
                  ctx.lineWidth=1;
                  stroke();
               }
               this.X = e.pageX ;
               this.Y = e.pageY ;
          }
      }, 0);
  </code></pre>