Posting canvas data with other inputs

[fiddle_sticks]

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:

<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>

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

<?php echo form_close(); ?>

The jquery:

$(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