title: How do I duplicate a shape in HTML5's canvas?
body: <p>I have a semi-complex and horizontally symmetrical shape I am trying to build using HTML5. While I was trying to finish it I realized it would be easier if I could just duplicate half of the shape, mirror it and move it to join the two images together.  I'm finding examples of how to mirror and move a shape, but not on how to duplicate it.</p>
  
  <p>Obviously, I'm hoping I won't need two separate canvas elements.</p>
  
  <p>Here is my code for reference:</p>
  
  <pre><code>var canvas = document.getElementById(id),
        context = canvas.getContext("2d"),
        color,
        height = 50;
        width = 564;
        arrowWidth = 40,
        arrowHeight = 15,
        arrowStart = height - arrowHeight,
        edgeCurveWidth = 50;
  
      if (parseInt(id.substr(-1), 10) % 2) {
        color = "#F7E5A5";
      } else {
        color = "#FFF";
      }
  
      context.beginPath();
      context.lineWidth = 4;
      context.strokeStyle = "#BAAA72";
      context.moveTo(0, 0);
      context.quadraticCurveTo(-10, arrowStart, edgeCurveWidth, arrowStart);
      context.quadraticCurveTo(width/2 - arrowWidth/2 - 15, arrowStart - 15, width/2 - arrowWidth/2, arrowStart);
      context.quadraticCurveTo(width/2, height, width/2, height);
      context.stroke();
      context.lineTo(width/2, 0);
      context.closePath();
      context.fillStyle = color;
      context.fill();
  </code></pre>