title: Trying to save canvas PNG data url to disk with HTML5 filesystem, but when I retrieve as URL, it's invalid
body: <p>I get the base64-encoded image form the canvas as:</p>
  
  <pre><code>var dataURL = canvas.toDataURL( "image/png" );
  </code></pre>
  
  <p>Then I turn it into data like this:</p>
  
  <pre><code>//Remove the beginning identifier and use Chrome/Firefox?safari built int base64Decoder
  var data = atob( dataURL.substring( "data:image/png;base64,".length ) );
  </code></pre>
  
  <p>Then I write it to the filesystem via:</p>
  
  <pre><code>event.createWriter(
      function(writerEvent)
      {
          //The success handler
          writerEvent.onwriteend = function(finishEvent)
          {
              ...
          };
  
          //Error handler
          writerEvent.onerror = settings.error;
  
          // Create a new Blob
          var blob = new Blob( [ data ], { type: "image/png" } );
  
          //Write it into the path
          writerEvent.write( blob );
      }
  }
  </code></pre>
  
  <p>I try to set it as src of an image like this:</p>
  
  <pre><code>document.getElementById( "saved" ).src = event.toURL();
  </code></pre>
  
  <p>That writes the file and I am able to find it and get a url (by reading it and using the event: <code>event.toURL()</code>. But the image shows as a broken image icon on the web page. What am I doing wrong?</p>