title: Canvas image rotation, dynamic canvas resize - image getting cropped
body: <p>I'm rotating an image by dragging using canvas rotate() function. Obviously the image gets cut during rotation.</p>
  
  <p><img src="https://i.stack.imgur.com/u1jzr.png" alt="cropped image"></p>
  
  <p>To tackle this problem I followed some <a href="https://stackoverflow.com/questions/19518721/image-crop-after-rotate-by-canvas">stackoverflow instructions</a> and implemented something like this:</p>
  
  <pre><code>//Resizing Canvas - this part is creating problem
  var w = imgW;
  var h = imgH;
  
  var newWidth,newHeight;
  var c = Math.cos(15*rot*0.0174532925);
  var s = Math.sin(15*rot*0.0174532925);
  
  if (s &lt; 0) { s = -s; }
  if (c &lt; 0) { c = -c; }
  newWidth = h * s + w * c;
  newHeight = h * c + w * s ;
  
  cnv2.width = newWidth;
  cnv2.height= newHeight;
  
  translateX = cnv2.width/axisFactor;
  translateY = cnv2.height/axisFactor
  ctx2.clearRect(0,0,cnv2.width,cnv2.height);
  ctx2.save();
  ctx2.translate(translateX,translateY);
  ctx2.rotate(15*rot*0.0174532925);
  ctx2.drawImage(img,-translateX,-translateY);
  ctx2.restore();
  </code></pre>
  
  <p>Though I'm able to get the correct size of the canvas the redraw of the image still gets cut.</p>
  
  <p><img src="https://i.stack.imgur.com/dgUR6.png" alt="enter image description here"></p>
  
  <p>What am I missing?</p>
  
  <p>Heres the fiddle:<a href="http://jsfiddle.net/anubhabB/wwas5jag/" rel="nofollow noreferrer">http://jsfiddle.net/anubhabB/wwas5jag/</a></p>
  
  <p>EDIT: Problem solved by correcting
      <pre><code>ctx2.drawImage(img,-translateX,-translateY);</code></pre></p>
  
  <p>with </p>
  
  <pre><code>ctx2.drawImage(img,-img.width/axisFactor,-img.height/axisFactor);</code></pre>
  
  <p>But this doesn't work for any axis which is not 1/2 of the image, say axis factor 3!</p>
  
  <p>How to tackle this?</p>