title: Shows a tiny black square on setting canvas height and width to img.offsetHeight and img.offsetWidth
body: <p>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 <code>canvas.style.height</code> to <code>img.offsetHeight</code> and <code>canvas.style.width</code> to <code>img.offsetwidth</code> (here <code>img=document.getElementById(&quot;img-element&quot;)</code>) its just showing a small black square, as if its height and width are 0.</p>
  <p>Here is the code:</p>
  <pre><code>window.onload=function(){  
    var c = document.getElementById(&quot;c&quot;);
    var ctx = c.getContext(&quot;2d&quot;);
    var img=document.getElementById(&quot;img&quot;);
    ctx.drawImage(img, 1, 1);
    c.style.height=(img.offsetHeight);
    c.style.width=(img.offsetWidth);
  }
  </code></pre>
  <pre><code>&lt;img src=&quot;Icon.png&quot; id=&quot;img&quot; style=&quot;display:none&quot;&gt;
  &lt;canvas id=&quot;c&quot; style=&quot;border:2px solid #001100&quot; oncontextmenu=&quot;return false;&quot;&gt;
    lol ur potato pc doesn't support canvas!!!
  &lt;/canvas&gt;
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>output:
  <a href="https://i.stack.imgur.com/OV2ea.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OV2ea.png" alt="" /></a></p>