title: How to draw canvas elements in the right positions?
body: <p>I am using javascript to draw a rectangle around DOM elements in a website. </p>
  
  <p>The problem is that the rectangles are drawn in the wrong positions. </p>
  
  <p>I know that canvas, work like a real canvas so you have to "predraw" everything before filling the canvas, otherwise the elements will be on top of each other, in the orders you drew them. </p>
  
  <p>That's why I'm defining canvas, and context outside of the loop. </p>
  
  <p>This is my code:</p>
  
  <pre><code>    var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      context.globalAlpha = 0.5;
  
      //Set canvas width/height
      canvas.style.width='100%';
      canvas.style.height='100%';
  
      //Set canvas drawing area width/height
      canvas.width = document.width;
      canvas.height = document.height;
  
      //Position canvas
      canvas.style.position='absolute';
      canvas.style.left=0;
      canvas.style.top=0;
      canvas.style.zIndex=100000;
      canvas.style.pointerEvents='none'; //Make sure you can click 'through' the canvas
      document.body.appendChild(canvas); //Append canvas to body element
  
  
  var listingsRect = Array.prototype.map.call(document.querySelectorAll('.rc'), function(e) {
          return e.getBoundingClientRect();
      });
  listingsRect.forEach(function(listingRect) {
      var x = listingRect.left;
      var y = listingRect.top;
      var width = listingRect.width;
      var height = listingRect.height;
  
      //Draw rectangle
      context.rect(x, y, width, height);
      context.fillStyle = 'yellow';
      context.fill();
  });
  </code></pre>
  
  <p>However, when I change 
  <code>canvas.width</code> and <code>canvas.height</code> to <code>window.innerWidth</code> and <code>window.innerHeight</code> respectively, then canvas draws the rectangles in the right positions, however it only draws them in the visible area of the website (obviously). </p>
  
  <p>Can somebody tell me what's wrong with my code?</p>
  
  <p>Here's a JS bin: </p>
  
  <p><a href="http://jsbin.com/elUToGO/1" rel="nofollow">http://jsbin.com/elUToGO/1</a></p>