title: Canvas toDataUrl increases file size of image
body: <p>When using toDataUrl() to set the source of an image tag I am finding that the image when saved is a great deal larger than the original image. </p>
  
  <p>In the example below I am not specifying a second param for the toDataUrl function so the default quality is being used. This is resulting in an image much larger that the original image size. When specifying 1 for full quality the image generated is even larger.</p>
  
  <p>Does anybody know why this is happening or how I can stop it?</p>
  
  <pre><code>            // create image
              var image = document.createElement('img');
  
              // set src using remote image location
              image.src = 'test.jpg';
  
              // wait til it has loaded
              image.onload = function (){
  
              // set up variables
              var fWidth = image.width;
              var fHeight = image.height;
  
              // create canvas
              var canvas = document.createElement('canvas');
              canvas.id = 'canvas';
              canvas.width = fWidth;
              canvas.height = fHeight;
              var context = canvas.getContext('2d');
  
              // draw image to canvas
              context.drawImage(image, 0, 0, fWidth, fHeight, 0, 0, fWidth, fHeight);
  
              // get data url 
              dataUrl =  canvas.toDataURL('image/jpeg');
  
              // this image when saved is much larger than the image loaded in
              document.write('&lt;img src="' + dataUrl + '" /&gt;');
  
              }
  </code></pre>
  
  <p>Thank you :D</p>
  
  <p>Here is an example, unfortunately the image cannot be cross domain and so I am having to just pull one of the jsfiddle images.</p>
  
  <p><a href="http://jsfiddle.net/ptSUd/" rel="noreferrer">http://jsfiddle.net/ptSUd/</a></p>
  
  <p>The image is 7.4kb, if you then save the image which is being output you will see that it is 10kb. The difference is more noticeable with more detailed images. If you set the toDataUrl quality to 1, the image is then 17kb.</p>
  
  <p>I am also using FireFox 10 for this, when using Chrome the image sizes are still larger but not by as much.</p>