I'm trying to implement a mobile Visualforce page that allows a user to draw a picture (using HTML Canvas), obtain the canvas as an image using the canvas.toDataURL() method, and save that image back to Salesforce as an attachment.

I've attempted to pass the toDataURL() result back to the controller using an actionfunction with a parameter, however when the following code runs, I'm receiving the message "Argument 1 cannot be null", so the result of toDataURL() isn't getting passed to the action function for some reason. Can anyone comment on why they think that's happening, or offer an alternative to accomplsih what I'm trying to do?

    <apex:form >
        <apex:inputHidden id="theImg" value="{!img}" />
        <div id="container" > 
            <canvas id="sketchpad" width="766" height="600"> 
                Sorry, your browser is not supported.
            </canvas>     
        </div>           
        <div id="not_container" style="border:2px solid #AAA;margin-top:25px;width:766px;height:100px;">
          <input type="button" value="Save Image" style="height:100%;width:25%" onclick="saveImage();"/>
          <script type="text/javascript">
              function saveImage() {
                  var canvas = document.getElementById("sketchpad").toDataURL("img/jpg");
                  submitToController(canvas);
              }
          </script>
          <apex:actionFunction name="submitToController" action="{!saveImage}">
              <apex:param name="myImg" value="" />
          </apex:actionFunction>
        </div>
    </apex:form>