title: Resize the canvas output image to a specific size (width/height)
body: <p>I have a big canvas (<code>5000x5000</code>) and I want to take a picture of it and create a thumbnail on client side. I can capture the image using <code>canvas.toDataURL</code> but how do i re-size it? Do i have to create an new <code>$("&lt;canvas&gt;&lt;/canvas&gt;")</code> element and then put that image inside and run the <code>canvas2.toDataURL();</code> Can anyone help me with this? I can't get my head around it how to do it.</p>
  
  <pre><code>var canvas = document.getElementById("main");
  var ctx = canvas.getContext("2d");
  var tumbnail64 = null;
  var image = new Image();
  image.src = canvas.toDataURL();
  image.onload = function() {
  
      $c2 = $("&lt;canvas&gt;&lt;/canvas&gt;");
      $c2[0].width=100;
      $c2[0].height=100;
      $c2[0].getContext("2d");
      $c2[0].drawImage(image, 0, 0,100,100);
      tumbnail64 = $c2[0].toDataURL();
  };
  </code></pre>