title: How to fit canvas to wrap image size
body: <p>Hello I have this canvas and image in it but I need to make it so the canvas wraps the image linked to its size. Right now i have put a test image and put size to be fixed. I want when i put and image the canvas to wrap it 100% width 100% height of the image.</p>
  
  <pre><code>var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");
  var cw=canvas.width;
  var ch=canvas.height;
  
  var boxWidth=100;
  var boxHeight=100;
  var boxRows=Math.ceil(865/boxHeight);
  var boxCols=Math.ceil(1152/boxWidth);
  var boxes=new Array(boxRows*boxCols);
  for(var i=0;i&lt;boxes.length;i++){boxes[i]=false;}
  
  var img=new Image();
  img.onload=start;
  img.crossOrigin='anonymous';
  img.src="http://i.imgur.com/RrHayx8.png?1";
  function start(){
  
  ctx.drawImage(img,0,0);
  
  var d=ctx.getImageData(0,0,cw,ch).data;
  
  for(var i=0;i&lt;d.length;i+=4){
  if(d[i+3]&gt;200){
    var px=parseInt(i/4);
    var pixelY=parseInt(px/cw);
    var pixelX=px-pixelY*cw;
    var boxX=parseInt(pixelX/boxWidth);
    var boxY=parseInt(pixelY/boxHeight); 
    boxes[boxY*boxCols+boxX]=true;
   }
    }
  
   ctx.globalAlpha=0.25;
   ctx.fillStyle='red';
  
   for(var i=0;i&lt;boxes.length;i++){
   var y=parseInt(i/boxCols);
   var x=i-y*boxCols;
   if(boxes[i]==true){
    ctx.fillRect(x*boxWidth,y*boxHeight,boxWidth,boxHeight);        
   }
   }
  
  ctx.globalAlpha=1.00;
  ctx.fillStyle='black';
  </code></pre>
  
  <p>}</p>
  
  <p><a href="https://jsfiddle.net/kdichev/Lmqdrkp2/" rel="nofollow">https://jsfiddle.net/kdichev/Lmqdrkp2/</a></p>