I am using the Photobooth.js plugin to take an image from a webcam using HTML5. I have some code already that someone else wrote that does not seem to work. I am new to JavaScript.

id="livecam" contains the live stream.
id="croppedimage" displays the image after it is cropped.

The code that I received had the id="croppedimage" in the form to be sent - But that is not working.
After clicking the Save & Print , nothing happens. It is supposed to re-direct me to onsite_registration_dashboard.cfm and i should be seeing the photo on the server.
Firebug console states "TypeError: canvas.toDataURL is not a function"- After switching the
Code:
<div id="croppedimage">
to
Code:
<canvas id="croppedimage">
, The canvas id="croppedimage" shows a blank image (instead of the image i took) and after hitting Save & Print It re-directs me to onsite_registration_dashboard.cfm but sends a blank image to the server.


Code:
<cfset xparam_str = "">
<cfif IsDefined("url.startrow")>
    <cfset xparam_str = "#xparam_str#&startrow=#url.startrow#">
</cfif>

<cfquery name="visitor" datasource="#g_datasource#">
    Select con_parent.parent_key,
    con_parent.first_name,
    con_parent.last_name
    from con_parent with (nolock) 
    where con_parent.show_id = '#g_show#' 
    and con_parent.active = 1
    and con_parent.key_id = '#url.master_key#'
</cfquery>
<cfquery name="master" datasource="#g_datasource#">
    Select con_mast.key_id,
    con_mast.custom_char1
    from con_mast with (nolock) 
    where con_mast.client_id = '#g_client#' 
    and con_mast.active = 1
    and con_mast.key_id = '#visitor.parent_key#'
</cfquery>


<center> 
<table width="700px" border="0">
            <tr>
                <td>
                    <div id="wrapper">
                    <div id="livecam"></div>
                    </div>
                </td>
                <td>

<cfform method="post" action="#g_tpage#registration/onsite_registration_dashboard.cfm&print_badge=#url.master_key##xparam_str#" name="photo_form">

<div id="croppedimage"></div>
</cfform>
<button type="button" id="getBase" onclick="saveImage();">Save & Print</button>

                </td>
          </tr>
</table>
</center>



<script>
function saveImage(){
    var xmlhttp;
    xmlhttp=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4){
            if(xmlhttp.status==200){
                //handle success 
                document.photo_form.submit();               
            }
        }
    }
    xmlhttp.open("POST","<cfoutput>#g_tpage#registration/onsite_photo_save.cfm&master_key=#url.master_key#</cfoutput>",true);
    var canvas = document.getElementById("croppedimage");
    var oldCanvas = canvas.toDataURL("image/jpeg");
    var params=oldCanvas;
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.send(params);
}
</script>
This is the function that takes the image- starting at "trigger":

Code:
var c = function( n ){ return ePhotobooth.getElementsByClassName( n )[ 0 ]; };
var cE = function( s ){ return document.createElement( s ); };

var ePhotobooth = cE( "div" );
ePhotobooth.className = "photobooth";
ePhotobooth.innerHTML = '<div class="blind"></div><canvas></canvas><div class="warning notSupported">Sorry, Photobooth.js is not supported by your browser</div><div class="warning noWebcam">Please give Photobooth permission to use your Webcam. <span>Try again</span></div><ul><li title="hue"class="hue"></li><li title="saturation"class="saturation"></li><li title="brightness"class="brightness"></li><li title="crop"class="crop"></li><li title="take picture"class="trigger"></li></ul>';

var eInput = cE( "canvas" );
var oInput = eInput.getContext( "2d" );

var eOutput = ePhotobooth.getElementsByTagName( "canvas" )[ 0 ];
var oOutput = eOutput.getContext( "2d" );

var eVideo = cE( "video" );
eVideo.autoplay = true;

var eNoWebcamWarning = c( "noWebcam" );
eNoWebcamWarning.getElementsByTagName( "span" )[ 0 ].onclick = function(){ fRequestWebcamAccess(); };

new Slider( c( "hue" ), function( value ){ hueOffset = value; });
new Slider( c( "saturation" ), function( value ){ saturationOffset = value; });
new Slider( c( "brightness" ), function( value ){ brightnessOffset = value; });

var oResizeHandle = new ResizeHandle( ePhotobooth, _width, _height );

var eCrop = c( "crop" );
eCrop.onclick = function()
{
    oResizeHandle.toggle();

    if( eCrop.className === "crop" )
    {
        eCrop.className = "crop selected";
    }
    else
    {
        eCrop.className = "crop";
    }
};

var eBlind = c( "blind" );

c( "trigger" ).onclick = function()
{
    /**
    * Flash
    */
    eBlind.className = "blind";
    eBlind.style.opacity = 1;
    setTimeout(function(){ eBlind.className = "blind anim"; eBlind.style.opacity = 0; }, 50);

    var mData = {};
    if( oResizeHandle.isActive() )
    {
        mData = oResizeHandle.getData();
    }
    else
    {
        if( bVideoOnly )
        {
            mData = {
                x: ( ( _width - eVideo.videoWidth ) / 2 ),
                y: ( ( _height - eVideo.videoHeight ) / 2 ),
                width: eVideo.videoWidth,
                height: eVideo.videoHeight
            };
        }
        else
        {
            mData = {
                x:0,
                y:0,
                width: _width,
                height: _height
            };
        }

    }

    var eTempCanvas = cE( "canvas" );

    eTempCanvas.width = mData.width;
    eTempCanvas.height = mData.height;

    if( bVideoOnly )
    {
        eTempCanvas.getContext( "2d" ).drawImage(
            eVideo,
            Math.max( 0, mData.x - ( ( _width - eVideo.videoWidth ) / 2 ) ),
            Math.max( mData.y - ( ( _height - eVideo.videoHeight ) / 2 ) ),
            mData.width,
            mData.height,
            0,
            0,
            mData.width,
            mData.height);
    }
    else
    {
        var oImageData = oOutput.getImageData( mData.x, mData.y, mData.width, mData.height );
        eTempCanvas.getContext( "2d" ).putImageData( oImageData, 0, 0 );
    }

    scope.onImage( eTempCanvas.toDataURL("image/jpeg") );
};
This is what i think places it in the element:
Code:
$(function(){
    $( '#livecam' ).photobooth().on( "image", function( event, dataUrl ){
        $( "#croppedimage" ).show().html( '<img src="' + dataUrl + '" >');
    });