title: How to use Fabric.js to save a canvas as an image
body: <p>I have a Fabric.js prototype where people can load photos, text, and maps into the canvas. When they're done, I want them to be able to save the canvas as an image. I've tried using the standard:</p>
  
  <pre><code>canvasURL = canvas.toDataURL();
  var image = new Image();
  image.src = canvas.toDataURL("image/png");
  $('#canvasContainer').replaceWith(image);
  </code></pre>
  
  <p>but it says that the canvas is <code>tainted</code> - I think because of the images (the method above works when it's just text). The error is: </p>
  
  <pre><code>Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 
  </code></pre>
  
  <p>I can use Fabric's built-in method to save as SVG:</p>
  
  <pre><code>var canvasSVG = canvas.toSVG();
  $('#canvasContainer').replaceWith(canvasSVG);
  </code></pre>
  
  <p>But I'd rather have a PNG/JPG. Any ideas?</p>
  
  <p>Here's the Fabric.js documentation on serialization of the canvas.</p>
  
  <p><a href="http://fabricjs.com/fabric-intro-part-3/#serialization">http://fabricjs.com/fabric-intro-part-3/#serialization</a></p>