title: How to apply position absolute to canvas
body: <p>I have the photo and the canvas in the div. The photo takes the whole div and I want to position absolute the canvas to be able to hide some parts of the photo with it. </p>
  
  <p>But I have a problem, the canvas doesn't take the whole width and height (the style that I use is <code>position: absolute;left:0;right:0;top:0;bottom:0</code>)</p>
  
  <p>My code is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var rect = {};
  var drag = false;
  var buttons = false;
  var angle = 10;
  var rotate_angle = 0;
  
  function init() {
      // imageObj = new Image();
      // imageObj.onload = function () { ctx.drawImage(imageObj, 0, 0); };
      // imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
      canvas.addEventListener('mousedown', mouseDown, false);
      canvas.addEventListener('mouseup', mouseUp, false);
      canvas.addEventListener('mousemove', mouseMove, false);
  
  }
  
  function mouseDown(e) {
      rect.startX = e.pageX - this.offsetLeft;
      rect.startY = e.pageY - this.offsetTop;
      drag = true;
      buttons = false;
      document.getElementById('test').innerHTML = '';
  }
  
  function mouseUp() { drag = false; buttons = true; }
  
  function onRemoveSelectionClick(e) {
      ctx.clearRect(0, 0, 500, 500);
      drag = false;
      buttons = false;
      document.getElementById('test').innerHTML = '';
  }
  
  
  function onRotateLeft(){
      rotate_angle = rotate_angle - angle;
  
      canvas.style.transform = 'rotate(' + rotate_angle + 'deg)';
  }
  
  function onRotateRight(){
      rotate_angle = rotate_angle + angle;
  
      canvas.style.transform = 'rotate(' + rotate_angle + 'deg)';
  }
  
  function mouseMove(e) {
      if (drag) {
          ctx.clearRect(0, 0, 500, 500);
          // ctx.drawImage(imageObj, 0, 0);
          rect.w = (e.pageX - this.offsetLeft) - rect.startX;
          rect.h = (e.pageY - this.offsetTop) - rect.startY;
          ctx.strokeStyle = 'black';
          ctx.shadowColor = 'black';
          // ctx.shadowBlur = 5;
  
          ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
          ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
  
  
          // ctx.filter = 'blur(5px)';
          // ctx.filter = 'drop-shadow(16px 16px 20px blue) '
      }else{
          if(buttons){
              if(document.getElementById('test').innerHTML === ''){
                  document.getElementById('test').innerHTML = '&lt;button onclick="onRotateLeft()"&gt;Rotate Left&lt;/button&gt;' +
                                                              '&lt;button onclick="onRotateRight()"&gt;Rotate right&lt;/button&gt;&lt;br /&gt;' +
                                                              '&lt;button onclick="onRemoveSelectionClick()"&gt;Remove Selection&lt;/button&gt;';
              }
          }
      }
  }
  //
  init();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position: relative; overflow: hidden;display:inline-block;"&gt;
      &lt;img src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" style="position: relative;"/&gt;
      &lt;canvas id="canvas" style="position: absolute;left: 0; right: 0; top: 0; bottom: 0;background-color: yellow; display:inline-block;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  
  &lt;div id="test"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/v7kjn2xb/" rel="nofollow noreferrer">Here is also the fiddle.</a></p>
  
  <p>If I add <code>width: 100%;height: 100%;</code> to the canvas, than it takes the whole width and height but the rectangle isn't drawn as it should be:</p>
  
  <p>You can see it here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var rect = {};
  var drag = false;
  var buttons = false;
  var angle = 10;
  var rotate_angle = 0;
  
  function init() {
      // imageObj = new Image();
      // imageObj.onload = function () { ctx.drawImage(imageObj, 0, 0); };
      // imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
      canvas.addEventListener('mousedown', mouseDown, false);
      canvas.addEventListener('mouseup', mouseUp, false);
      canvas.addEventListener('mousemove', mouseMove, false);
  
  }
  
  function mouseDown(e) {
      rect.startX = e.pageX - this.offsetLeft;
      rect.startY = e.pageY - this.offsetTop;
      drag = true;
      buttons = false;
      document.getElementById('test').innerHTML = '';
  }
  
  function mouseUp() { drag = false; buttons = true; }
  
  function onRemoveSelectionClick(e) {
      ctx.clearRect(0, 0, 500, 500);
      drag = false;
      buttons = false;
      document.getElementById('test').innerHTML = '';
  }
  
  
  function onRotateLeft(){
      rotate_angle = rotate_angle - angle;
  
      canvas.style.transform = 'rotate(' + rotate_angle + 'deg)';
  }
  
  function onRotateRight(){
      rotate_angle = rotate_angle + angle;
  
      canvas.style.transform = 'rotate(' + rotate_angle + 'deg)';
  }
  
  function mouseMove(e) {
      if (drag) {
          ctx.clearRect(0, 0, 500, 500);
          // ctx.drawImage(imageObj, 0, 0);
          rect.w = (e.pageX - this.offsetLeft) - rect.startX;
          rect.h = (e.pageY - this.offsetTop) - rect.startY;
          ctx.strokeStyle = 'black';
          ctx.shadowColor = 'black';
          // ctx.shadowBlur = 5;
  
          ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
          ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
  
  
          // ctx.filter = 'blur(5px)';
          // ctx.filter = 'drop-shadow(16px 16px 20px blue) '
      }else{
          if(buttons){
              if(document.getElementById('test').innerHTML === ''){
                  document.getElementById('test').innerHTML = '&lt;button onclick="onRotateLeft()"&gt;Rotate Left&lt;/button&gt;' +
                                                              '&lt;button onclick="onRotateRight()"&gt;Rotate right&lt;/button&gt;&lt;br /&gt;' +
                                                              '&lt;button onclick="onRemoveSelectionClick()"&gt;Remove Selection&lt;/button&gt;';
              }
          }
      }
  }
  //
  init();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position: relative; overflow: hidden;display:inline-block;"&gt;
      &lt;img src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" style="position: relative;"/&gt;
      &lt;canvas id="canvas" style="position: absolute;left: 0; right: 0; top: 0; bottom: 0;background-color: yellow; display:inline-block;width:100%;height: 100%;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  
  &lt;div id="test"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/v7kjn2xb/1/" rel="nofollow noreferrer">Here is the fiddle for the second case.</a></p>
  
  <p>Any idea how to solve it?</p>