Canvas Pad Signature on VF page..?

Hi i have created a VF page to capture signature uisng this link

Link which i have used

It working fine in individual vf page but when i add tr,td and table it is not working.I just don’t know the reason why..Trying to sort this out from last 2 days.Need urgent help in this.

Below is the code

VF page

<apex:includeScript value="/soap/ajax/28.0/connection.js"/>

     <style>
      .container {
       text-align: center;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
       color: cadetblue;
       font-weight: 500;
       font-size: 14px;
      }

      .button {
       font-family: calibri;
       border-radius: 8px;
       background-color: rgb(51, 116, 116);
       height: 36px;
       color: azure;
       font-size: 17px;
       border-width: 0px;
       width: 116px;
      }
     </style>

Javascript

<script>
    var canvas;   
    var context;   
    var drawingUtil;   
    var isDrawing = false;
    var accountId = '';   
    var prevX, prevY, currX, currY = 0;   
    var accountId;

    function DrawingUtil() {    
        isDrawing = false;   
        canvas.addEventListener("mousedown", start, false);   
        canvas.addEventListener("mousemove", draw, false);   
        canvas.addEventListener("mouseup", stop, false);   
        canvas.addEventListener("mouseout", stop, false);   
        canvas.addEventListener("touchstart", start, false);   
        canvas.addEventListener("touchmove", draw, false);   
        canvas.addEventListener("touchend", stop, false);    
        w = canvas.width;
        h = canvas.height;   
    }

    function start(event) {    
        event.preventDefault();
        isDrawing = true;    
        prevX = currX;    
        prevX = currY;    
        currX = event.clientX - canvas.offsetLeft;    
        currY = event.clientY - canvas.offsetTop;
        context.beginPath();    
        context.fillStyle = "cadetblue";    
        context.fillRect(currX, currY, 2, 2);
        context.closePath();
    }

    function draw(event) {    
        event.preventDefault();    

        if (isDrawing) {
            prevX = currX;
            prevY = currY;
            currX = event.clientX - canvas.offsetLeft;
            currY = event.clientY - canvas.offsetTop;

            context.beginPath();
            context.moveTo(prevX, prevY);
            context.lineTo(currX, currY);
            context.strokeStyle = "cadetblue";
            context.lineWidth = "2";
            context.stroke();
            context.closePath();    
        }   
    }

    function stop(event) {    
        if (isDrawing) {
            context.stroke();
            context.closePath();
            isDrawing = false;    
        }   
    }

    function clearSign() {    
        context.clearRect(0,0,w,h);   
    }

    canvas = document.getElementById("signatureCanvas");
    context = canvas.getContext("2d");
    context.strokeStyle = "black";   context.lineWidth = "2";
    drawingUtil = new DrawingUtil(canvas);
    alert('hi');

    function saveSignature() {    
        var strDataURI = canvas.toDataURL(); 
        strDataURI = strDataURI.replace(/^data:image\/(png|jpg);base64,/, "");
        var accId = location.href.split('=')[1];    
        accountId = accId;    
        var result = CaptureSignatureController.saveSignature(strDataURI, accId,
 processResult);   
    }

    function processResult(result) {    
        alert(JSON.stringify(result)); 
        window.location.href = '/'+accountId;   
    }
</script>


 <div class="container">
   <h1 class="labelCol vfLabelColTextWrap ">Record Signature:</h1>
   <canvas id="signatureCanvas" height="100px" width="350px" style="border: 3px solid antiquewhite; border-radius: 8px;" ></canvas>
  </div><br/>

Issue

Even if i add normal HTML tags anywhere inside the form i am not able to draw anything.
Below is the eg if i add this on the page it stopped working,if i remove it started working again.

I need urgent help in this thanks.

<table width="100%">
          <tr>
            <td width="5%"></td>
             <td width="15%"><apex:outputText >Upload</apex:outputText></td>

          </tr> 
     </table>

enter image description here

Answer

Can you please provide a little more details as to what is not working for you specifically?
I just copied your code, made a small change, added the table and set it up here: http://dev-sep.force.com/testCanvas
For me, this works without any problems.

The only important thing is to change the order of <script> and <div> – as inside the <script> you are referring to the id signatureCanvas, which only ever exists after the browser has parsed the <div> part.

So just swap them, put the <script> at the end of your page and all should work fine.

Attribution
Source : Link , Question Author : miku , Answer Author : 0ff

Leave a Comment