Hi All, I have created a code to capture a customer signature and added it has attachment to that account.This working fine, but when I added this code to my vf page which is created using datatable. In that datatable I am having a custom button " Sign" when the user click on the button it will show a popup, from that popup I need to capture the signature. I have created this popup using output panel but I can't able to draw the signature on popup.Kindly give me any idea for this.
Here is link to my code:
<!-- SignUp Popup Start-->
<apex:outputPanel id="signuppopup">
  
    <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
    <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}" style="overflow:auto; width:800px; height:500px;">
        <!-- <apex:commandButton value="Submit" action="{!saveAnswers}" rerender="signuppopup"/>
        <apex:commandButton value="Save" action="{!saveAnswers}" rerender="signuppopup"/>-->
    <apex:commandButton value="HidePopup" action="{!closePopup}" rerender="signuppopup" style="float:right" />
      
          
        <!-------------- Account Detail Header --------------->
        <apex:pageBlock >
        <apex:pageBlockSection title="Account Details" columns="2">
        <apex:outputField value="{!CSignup.Acc.Name}"/>
        <apex:outputField value="{!CSignup.Acc.SAP_Customer__c}"/>
        <apex:outputField value="{!CSignup.Acc.Customer_Category__c}"/>
        <apex:outputField value="{!CSignup.Acc.Customer_Grading__c}"/>       
        <apex:outputField value="{!CSignup.Acc.Customer_Price_Group__c}"/>       
        <apex:outputField value="{!CSignup.Acc.ABC_Class__c}"/>
        <apex:outputField value="{!CSignup.Acc.Account_Status__c}"/>
        <apex:outputField value="{!CSignup.Acc.Sales_Office__c}"/> 
        </apex:pageBlockSection> 
            <apex:pageBlockSection title="SIGNUP FORM"></apex:pageBlockSection>
            <!--<button onclick="findAccounts();" value = "sign" rerender="signature"/>-->
          <!--<apex:commandButton value="Submit" action="{!saveSignature}" rerender="signature"/>-->
        <!-------------- End of Account Detail Header ---------------> 
    <!--</apex:pageBlock>
        <apex:pageBlock >-->
<script>var $j = jQuery.noConflict();</script>
<apex:stylesheet value="{!URLFOR($Resource.jquerymobile132mincss,'styles.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jqueryjs)}"  />
<apex:includeScript value="{!URLFOR($Resource.jquerymobile132minjs)}"/>

<div data-role="page" id="signatureCaptureHome">
<div data-role="content">
<input id="accountNameId" type="text" name="accountName"/>
<input type="button" name="findAccountBtn" onclick="findAccounts();" value="Find Accounts"/>
<h1 id="recordSigId">Record Signature:</h1>
<canvas id="signatureCanvas" height="200px" width="300px"/>
<input id="saveSigButton" type="button" name="SigCap" onclick="saveSignature();" value="Capture Signature"></input>
</div>
</div>
<div data-role="page" id="signatureCaptureHome">
<div data-role="content">
<input id="accountNameId" type="text" name="accountName"/>
<input type="button" name="findAccountBtn" onclick="findAccounts();" value="Find Accounts"/>
</div>
</div>
<!-------------------->
<script>

    var canvas;
    var context;
    var drawingUtil;
    var isDrawing = false;
    var accountId = '';

function DrawingUtil()
{
    isDrawing = false;
    canvas.addEventListener("touchstart",start,false);
    canvas.addEventListener("touchmove",draw,false);
    canvas.addEventListener("touchend",stop,false);
    context.strokeStyle = "#FFF"; 
}

//Start Event for Signature Captuare on HTML5 Canvas
function start(event)
{
    isDrawing = true;
    canvas = document.getElementById("signatureCanvas");
    context = canvas.getContext("2d");   
    context.strokeStyle = "rgba(155,0,0,0.5)";     
    context.beginPath();
     context.moveTo(event.touches[0].pageX - canvas.getBoundingClientRect().left,event.touches[0].pageY - canvas.getBoundingClientRect().top);
}

//Event while someone is drawing to caputre the path while they draw....
function draw(event) {
    event.preventDefault();
    if(isDrawing) {   
        context.lineTo(event.touches[0].pageX - canvas.getBoundingClientRect().left,event.touches[0].pageY - canvas.getBoundingClientRect().top);
        context.stroke();
    }
}


//Event when someone stops drawing their signature line
function stop(event) {
    if(isDrawing) {
        context.stroke();
        context.closePath();
        isDrawing = false;
    }
}

canvas = document.getElementById("signatureCanvas");
context = canvas.getContext("2d");
drawingUtil = new DrawingUtil(canvas);

function saveSignature()
{
var strDataURI = canvas.toDataURL();
    // alert(strDataURI);
    strDataURI = strDataURI.replace(/^data:image\/(png|jpg);base64,/, "");
//alert(strDataURI);
//AnyObjectSignatureController.saveSignature(strDataURI,accountId,processResult);
CSignup.saveSignature(strDataURI,accountId,processResult);
}

function processResult(result)
{
alert(JSON.stringify(result));
}

function findAccounts()
{
var nameValue = document.getElementById("accountNameId").value;
//AnyObjectSignatureController.findAccounts(nameValue, processSearchResult);
CSignup.saveSignature(strDataURI,accountId,processResult);
}

function processSearchResult(result)
{
$j = jQuery.noConflict();
//$j("#accountList").html("");
$j.each(result, function(i, record) {accountId = record.Id; $j("#recordSigId").html("Record Signature: " + record.Name);});
$j("#recordSigId").trigger("update");
//$j("#accountList").trigger("update");
//alert(JSON.stringify(result));
}


</script>
  
<!----------------->   

        </apex:pageBlock>
    </apex:outputPanel>
</apex:outputPanel>
<!-- SignUp Popup End-->
<apex:pageBlock Title=" Plan" id="table1">
<apex:dataTable value="{!list1}" var="a" columnswidth="50px,50px">
<apex:column headervalue="{!firstheader}" />
</apex:dataTable>
<apex:pageBlockSection >     
<apex:dataTable value="{!list1}" var="a" columnswidth="50px,50px" cellpadding="5" columns="8" border="1" width="1150px" bgcolor="#c7d6f2" rowClasses="1" >
<apex:commandButton value="SIGNUP FORM" action="{!getSignupfuntion}" disabled="{!disableList1}" reRender="signuppopup">
               <apex:param name="p1" value="{!a.jpd.AccountName__c}" assignTo="{!recordId}"/>
         </apex:commandButton>&nbsp;
</apex:column> 
          
</apex:dataTable>
<!--</apex:pageBlockTable>-->

</apex:pageBlockSection>
</apex:pageBlock>