title: Submitting form hidden field or canvas with with javascript and.or ajax?
body: <p>I have a canvas I would like to save along with a form submit.  The way I currently have seems to only be saving a blank canvas.  Although, from the code you will see, I am able to save the canvas successfully with a save button...</p>
  
  <p>Code:</p>
  
  <p>View:</p>
  
  <pre><code>...
  &lt;%= ff.hidden_field :print_file, id: "canvascontent" %&gt;
  &lt;a id="lnkDownload" title="Save"&gt;Save&lt;/a&gt; #this is the button that saves form
  &lt;canvas id="fCanvas"&gt;&lt;/canvas&gt;
  ...
  &lt;%= f.submit "Save" %&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>#canvas/fabric js code here
  ...
  #save button code
  var imageSaver = document.getElementById('lnkDownload');
  imageSaver.addEventListener('click', saveImage, false);
  
  function saveImage(e) {
     this.href = canvas.toDataURL({
        format: 'png',
        quality: 0.8
     });
     this.download = 'saved_image.png'
  };
  
  #form submit save attached to hidden field
  var url = canvas.toDataURL('image/png')
  $("#canvascontent").val(url);
  </code></pre>
  
  <p>What the hidden_field passes through on form submit is a base64 image.  Unfortunately, it's blank.</p>
  
  <p>Is there a way I can save the canvas on form submit that will pass the canvas through the same way the save button does?</p>
  
  <p>I can only assume the canvas data is being left behind before it's able to be sent to the form submit.</p>
  
  <p>Any ideas on how I can get this to work?</p>
  
  <blockquote>
    <p>Attempts to triggering <code>toDataURL</code>:</p>
  </blockquote>
  
  <pre><code>&lt;a id="setDownload" title="Save"&gt;Save&lt;/a&gt;
  
  var imageSetter = document.getElementById('setDownload');
     imageSetter.addEventListener('click', setImage, false);
     function setImage(e) {
        this.href = canvas.toDataURL({
            format: 'png',
            quality: 0.8
        });
     $("#canvascontent").val(this.href);
  };
  </code></pre>
  
  <p>This is in attempt to "set" the image.  When i click the setDownload , IT WORKS and it saves the canvas how i want with the form submit.  It will successfully get into my model</p>
  
  <p>Now, I try calling the imageSetter like so...</p>
  
  <p>The <code>updateImage</code> function adds images to the canvas successfully.</p>
  
  <pre><code>function updateImage(imageURL){
      fabric.Image.fromURL(imageURL, function(img) {
          #canvas_image_rendering_code
          }, {crossOrigin: 'anonymous'});
      var url = canvas.toDataURL({
          format: 'png',
          quality: 0.8
      });
      setImage();
  };
  </code></pre>
  
  <p>With this, the saved image is still blank...for some reason setImage isn't being called? or so i thought...</p>
  
  <p>I also thought maybe the canvas wasn't loaded so I tried <code>setTimeout(setImage(), 3000);</code> which isn't ideal even if it works but wanted to see.</p>
  
  <p>Then i thought, is it even being called?</p>
  
  <p>So i set <code>setImage</code> as an alert to se if it's calling it</p>
  
  <pre><code>function setImage() {
    alert("Hello");
  }
  </code></pre>
  
  <p>And it IS being called..the alert pops up when i choose an image for the canvas</p>
  
  <p>How can I call the <code>setImage</code> function from within that function and have it work the same way as when i click <code>setDownload</code>?</p>
  
  <p>What's the story of why this happens?</p>
  
  <p>Keys:</p>
  
  <ol>
  <li>Saves canvas on form submit when i click <code>setDownload</code> link href.</li>
  <li>calling <code>setImage</code> function within <code>updateImage</code> function works with alert example, but not with setting the image with toDataURL.</li>
  </ol>