title: HTML5 Canvas merging to rectangles to form a new shape
body: <p>I have a page that you will be able to draw squares on it. The squares will represent a room, so you have one square, then you make another over the first square and then two will join </p>
  
  <p>It will looks like this
  <a href="http://puu.sh/bllo7/95e2112d79.png" rel="nofollow">http://puu.sh/bllo7/95e2112d79.png</a></p>
  
  <p>And functions like so <a href="http://jsfiddle.net/bLenxexL/" rel="nofollow">http://jsfiddle.net/bLenxexL/</a></p>
  
  <p>I need to figure out how get them squares to make another shape that will look like the image on the right of the picture above.</p>
  
  <p>If this helps, the square info is stored in <code>points</code> in this format</p>
  
  <pre><code>[
      {
          start: {x: 312, y: 164}, 
          end: {x: 734, y: 371}
      },
      {
          start: {x: 696, y: 304}, 
          end: {x: 1060, y: 561}
      }
  ]
  </code></pre>
  
  <p>Any links to resources that will help me do this will be of  much help thank you</p>