Posting canvas data url along with other form data

Posting canvas data url along with other form data

    Okay so please can somebody tell me what Im doing wrong here.
    Im trying to convert the contents of a canvas into a data url and then post it along with other inputs to the controller in order to save an image.

    The PHP:
      1. <form method="post" accept-charset="utf-8" action="<?php echo ($base_url . 'template/new_template'); ?>" name="form" id=form" />
      2. <?php
      3. $edit_template_code = array(
      4.         'name' => 'edit_template_code',
      5.         'id' => 'edit_template_code', 
      6.         'value' => set_value('edit_template_code')
      7.     );
      8. ?>
      9. <canvas id="processing-canvas"> </canvas>

      11. <?php echo form_textarea($edit_template_code); ?>
      12. <input type='hidden' name='save_image' />
      13. <?php echo form_submit(array('name' => 'save'), 'Save Template'); ?>

      15. <?php echo form_close(); ?> 
      The jquery:
      1. $(document).ready(function() {
      2.     $("#form").submit(function() {
      3.         var canvas = document.getElementById("processing-canvas"); //in your pjs sketch this is externals.canvas 
      4.         var save_image = canvas.toDataURL("image/png");
      5.         
      6.         $('input[name=save_image]').val(save_image);        
      7.     });
      8. }); 
      Or maybe somebody knows of a different way to do it…?
      Thanks in advance