title: Adjust size of drawing canvas with position absolute
body: <p>I'm trying to make a drawing canvas. It works but when i draw, the line and mouse is not on the same line/not sync. The line is drawn further from the mouse cursor. If I remove the position:relative from container-whiteboard, then it works fine but the issue is, the canvas fills the entire screen and I could draw anywhere on the screen.</p>
  <p><a href="https://i.stack.imgur.com/QU2f9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QU2f9.png" alt="drawing canvas" /></a></p>
  <pre><code>&lt;div class=&quot;container-whiteboard&quot;&gt;
      &lt;canvas class=&quot;whiteboard&quot; &gt;&lt;/canvas&gt;
      &lt;div class=&quot;colors&quot;&gt;
          &lt;div class=&quot;color black&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;color red&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;color green&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;color blue&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;color yellow&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;color white&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
  .container-whiteboard{
      position: relative;
      width: 100%;
      height: 500px;
      border: 3px solid #73AD21;
  }
  .whiteboard {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
  }
  .colors {
     position: fixed;
  }
  &lt;/style&gt;
  &lt;script&gt;
          var canvas = document.getElementsByClassName('whiteboard')[0];
      var colors = document.getElementsByClassName('color');
      var context = canvas.getContext('2d');
  
      var current = {
          color: 'black'
      };
      var drawing = false;
  
      canvas.addEventListener('mousedown', onMouseDown, false);
      canvas.addEventListener('mouseup', onMouseUp, false);
      canvas.addEventListener('mouseout', onMouseUp, false);
      canvas.addEventListener('mousemove', throttle(onMouseMove, 10), false);
      
      //Touch support for mobile devices
      canvas.addEventListener('touchstart', onMouseDown, false);
      canvas.addEventListener('touchend', onMouseUp, false);
      canvas.addEventListener('touchcancel', onMouseUp, false);
      canvas.addEventListener('touchmove', throttle(onMouseMove, 10), false);
  
      for (var i = 0; i &lt; colors.length; i++){
          colors[i].addEventListener('click', onColorUpdate, false);
      }
  
      window.addEventListener('resize', onResize, false);
      onResize();
  
      function drawLine(x0, y0, x1, y1, color, emit){
          context.beginPath();
          context.moveTo(x0, y0);
          context.lineTo(x1, y1);
          context.strokeStyle = color;
          if(color == 'white')
              context.lineWidth = 20;
          else
              context.lineWidth = 2;
          context.stroke();
          context.closePath();
  
          if (!emit) { return; }
          var w = canvas.width;
          var h = canvas.height;
  
          channel.whisper('drawingEvent',{
              x0: x0 / w,
              y0: y0 / h,
              x1: x1 / w,
              y1: y1 / h,
              color: color
          })
          console.log('drawing');
      }
  
      function onMouseDown(e){
          drawing = true;
          current.x = e.clientX||e.touches[0].clientX;
          current.y = e.clientY||e.touches[0].clientY;
      }
  
      function onMouseUp(e){
          if (!drawing) { return; }
          drawing = false;
          drawLine(current.x, current.y, e.clientX||e.touches[0].clientX, e.clientY||e.touches[0].clientY, current.color, true);
      }
  
      function onMouseMove(e){
          if (!drawing) { return; }
          drawLine(current.x, current.y, e.clientX||e.touches[0].clientX, e.clientY||e.touches[0].clientY, current.color, true);
          current.x = e.clientX||e.touches[0].clientX;
          current.y = e.clientY||e.touches[0].clientY;
      }
  
      function onColorUpdate(e){
          current.color = e.target.className.split(' ')[1];
      }
  
      // limit the number of events per second
      function throttle(callback, delay) {
          var previousCall = new Date().getTime();
          return function() {
          var time = new Date().getTime();
  
          if ((time - previousCall) &gt;= delay) {
              previousCall = time;
              callback.apply(null, arguments);
          }
          };
      }
  
      function onDrawingEvent(data){
          console.log(2);
          var w = canvas.width;
          var h = canvas.height;
          drawLine(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color);
      }
  
      function onResize() {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
      }
  &lt;/script&gt;
  </code></pre>