title: draw rectangle over html with javascript
body: <p>I know there's a similar question <a href="https://stackoverflow.com/questions/14680690/draw-rectangles-and-annotate-webpage">here</a>, but neither the question nor the answer have any code. </p>
  
  <p>What I want to do, is to port this functionality to a 100% Javascript solution. Right now I'm able to draw a rectangle on top of HTML content using PHP. </p>
  
  <p>I scrape a website with CasperJS, take a snapshot, send the snapshot path back to PHP along with a json object that contains all the information necessary to draw a rectangle with GD libraries. That works, but now I want to port that functionality into Javascript. </p>
  
  <p>The way I'm getting the rectangle information is using <code>getBoundingClientRect()</code> that returns an object with <code>top</code>,<code>bottom</code>,<code>height,</code> <code>width</code>, <code>left</code>,and <code>right</code>. </p>
  
  <p>Is there any way to "draw" the HTML of the website to a canvas element, and then draw a Rectangle on that canvas element? 
  Or is there any way to draw a rectangle on top of the HTML using Javascript? </p>
  
  <p>Hope my question is clear enough.</p>
  
  <p>This is the function that I'm using to get the coordinates of the elements that I want to draw a Rectangle around. </p>
  
  <pre><code>function getListingRectangles() {
      return Array.prototype.map.call(document.querySelectorAll('.box'), function(e) {
          return e.getBoundingClientRect();
  });
  </code></pre>