Shows a tiny black square on setting canvas height and width to img.offsetHeight and img.offsetWidth

I am trying to display a canvas with an image drawn in it (especially to prevent downloading the image by chrome mobile users). When i am setting the canvas.style.height to img.offsetHeight and canvas.style.width to img.offsetwidth (here img=document.getElementById("img-element")) its just showing a small black square, as if its height and width are 0.

Here is the code:

window.onload=function(){  
  var c = document.getElementById("c");
  var ctx = c.getContext("2d");
  var img=document.getElementById("img");
  ctx.drawImage(img, 1, 1);
  c.style.height=(img.offsetHeight);
  c.style.width=(img.offsetWidth);
}
<img src="Icon.png" id="img" style="display:none">
<canvas id="c" style="border:2px solid #001100" oncontextmenu="return false;">
  lol ur potato pc doesn't support canvas!!!
</canvas>
<script src="script.js"></script>

output:

Answer

Here is how I would write it. First instead of using style on the canvas width and height just set it as c.width and c.height. I would also set those before drawing the image. Also give the image a width and height and use visibility instead of display. This means you have to set the position to absolute to remove it from the html flow.

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-whirl.jpg" id="img">
<canvas id="c" style="border:2px solid #001100" oncontextmenu="return false;">
  lol ur potato pc doesn't support canvas!!!
</canvas>
#img {
  position: absolute;
  width: 200px;
  height: 200px;
  visibility: hidden;
}

window.onload=function(){
  var c = document.getElementById("c");
  var ctx = c.getContext("2d");
  var img=document.getElementById("img");  
  c.height = img.getBoundingClientRect().height;
  c.width = img.getBoundingClientRect().width;
  ctx.drawImage(img, 1, 1);
}