title: Get a data URI from a HTML canvas on a Google Apps Script web page
body: <h2>The Problem</h2>
  
  <p>I'm trying to implement a signature collector using this library: github.com/szimek/signature_pad</p>
  
  <p>The collector is running as a web app on Google Apps Script. I'd like to be able to use our company's user list and Drive together with the signature to create a PDF.</p>
  
  <p>I've created the form using regular HTML and I've added the canvas element from the library's demo page.</p>
  
  <p>I can draw a signature but when I try to extract the data URL using <code>canvas.toDataURL()</code> I get the following message:</p>
  
  <pre><code>Expected property "toDataURL" to be a function, not undefined: undefined
  </code></pre>
  
  <p>in the Chrome developer console.</p>
  
  <h2>What I've Tried</h2>
  
  <p>I assume that the Google Caja library (of which I know next to nothing) does not implement or allow the <code>toDataURL()</code> method. I found this library: <a href="http://www.nihilogic.dk/labs/canvas2image/" rel="nofollow">http://www.nihilogic.dk/labs/canvas2image/</a>, that can create a base64 encoded version of a BMP of the canvas.</p>
  
  <p>This time I can run the code and extract some data but when I try to put the image back together on the server end, all I get is a black box.</p>
  
  <p>Here's an example app that demonstrates the problem: <a href="https://script.google.com/macros/s/AKfycbwXo0xFNWqiewoe4oh-cSxTdhmqRTyNDwL9xknbtOdk3rLbHZ8/exec" rel="nofollow">https://script.google.com/macros/s/AKfycbwXo0xFNWqiewoe4oh-cSxTdhmqRTyNDwL9xknbtOdk3rLbHZ8/exec</a></p>
  
  <p>The example outputs</p>
  
  <pre><code>Object [object Object] has no method 'toDataURL'
  </code></pre>
  
  <p>to the developer console. This should be because I'm using NATIVE sandbox mode instead of EMULATED.</p>
  
  <p>Here's a link to the editable project: https:// script.google.com/d/19azWWXnrUO72ryDWhmhKJA-PqoOiDIRNPEIt61h2l_kduUbD87V4P311/edit?usp=sharing. Maybe some nice person can make that a proper link for me?</p>
  
  <h2>What Next</h2>
  
  <ul>
  <li>Is there a way I can get the <code>toDataURL()</code> method to work?</li>
  <li>Should the BMP solution work? What's going wrong?</li>
  <li>Are there other libraries/solutions I could use?</li>
  </ul>
  
  <p>Obviously I haven't provided any code. I can do so on request. If the BMP solution should work then I'll show you what I'm doing, I haven't added the code now because it may just be a dead end.</p>
  
  <p>EDITS:</p>
  
  <ul>
  <li>Corrected <code>getDataURL()</code> to <code>toDataURL()</code></li>
  <li>Added example app</li>
  </ul>