title: HTML5 - Poor image quality when resizing canvas
body: <p>I am in the process of making and image uploading page with client side image resizing (using HTML5 canvas).  Everything is working, but the problem is that the image quality is not very good.</p>
  
  <p><a href="http://mark.carthousefurniture.co.uk/MiniExperiments/gallery.php?gallery=samplegallery" rel="noreferrer">Here is a link</a> to a (work in progress) photo gallery with images that my resize/upload code has generated.</p>
  
  <p>Can you see what I mean by poor quality?  Lots of jagged edges, especially on the thumbnail images.  Any ideas of how to fix this?</p>
  
  <p>Here is my javascript for generating the thumbnails:</p>
  
  <pre><code>img.onload = function()
  {
     var canvasWidth = 150;
     var canvasHeight = 150;
     var Rz = resizeCanvasSmall(img,canvasID,canvasWidth,canvasHeight);
  
     ctx.drawImage(img,Rz[0],Rz[1],Rz[2],Rz[3],Rz[4],Rz[5],Rz[6],Rz[7]);
     dataurl = canvas.toDataURL("image/jpeg",0.8);  // File type and quality (0.0-&gt;1.0)
     UploadFile();
  }
  
  
  // Function to resize canvas (for thumbnail images)
  // img = image object, canvas = canvas element ID
  function resizeCanvasSmall(img,canvas,width,height)
  {
  var sx; //The x coordinate where to start clipping
  var sy; //The y coordinate where to start clipping
  var swidth; //The width of the clipped image
  var sheight; //The height of the clipped image
  
  var aspectRatio = width / height;
  
  if (img.width &gt; img.height) // If landscape
  {
      sheight = img.height;
      swidth = img.height * aspectRatio;
      sy = 0;
      sx = (img.width - swidth) / 2;
  }
  else //If portrait
  {
      swidth = img.width;
      sheight = img.width / aspectRatio;
      sx = 0;
      sy = (img.height - sheight) / 2;
  }
  
  document.getElementById(canvas).width = width;
  document.getElementById(canvas).height = height;
  
  return [sx,sy,swidth,sheight,0,0,width,height];
  }
  </code></pre>