Posting Canvas Data url along with other inputs in form

[eluser]fiddle-sticks[/eluser]
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.

Code:

<form method="post" accept-charset="utf-8" action="<?php echo ($base_url . 'template/new_template'); ?>" name="form" id=form" />
<?php
$edit_template_code = array(
        'name' => 'edit_template_code',
        'id' => 'edit_template_code',
        'value' => set_value('edit_template_code')
    );
?>
<canvas id="processing-canvas"> </canvas>


&lt;?php echo form_textarea($edit_template_code); ?&gt;
&lt;input type='hidden' name='save_image' /&gt;
&lt;?php echo form_submit(array('name' => 'save'), 'Save Template'); ?&gt;

&lt;?php echo form_close(); ?&gt;

Code:

$(document).ready(function() {
    $("#form").submit(function() {
        var canvas = document.getElementById("processing-canvas"); //in your pjs sketch this is externals.canvas
        var save_image = canvas.toDataURL("image/png");
        
        $('input[name=save_image]').val(save_image);
        
    });
});

Or maybe somebody knows of a different way to do it...?
Thanks in advance

[eluser]fiddle-sticks[/eluser]
Anybody got any ideas?