5

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

  • Do you see any errors in the console log? You can get some additional debugging info by running your HTML page through the W3C validator - validator.w3.org – Gaurav Kheterpal Sep 11 '14 at 2:59
  • Where are you trying to add your HTML? – Alex Tennant Sep 11 '14 at 8:47
4
+100

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.

  • Yes it is working fine on individual page..but when i add some fields at the top from any of the object.,.Then i am unable to draw anything on canvas pad..I am unable to find what is happening when i just add the fields at the top with some HTML styling....Can we chat via something..? – miku Sep 12 '14 at 4:53
  • Hey miku, I think we should stay here for discussing this, as this would allow others to follow up with the solution later. Could you please post a change you made to break it? I'd then go ahead, do the same change and verify what broke. – 0ff Sep 12 '14 at 10:33
  • 1
    Can you just add some input fields above so the scroll becomes visible on the right...When the page becomes big....then try to use canvas pad to sign..May be some pixles are changing...then i am unable to sign....??Its been 10 days i am stuck on this..Not able to find whats wrong..:( – miku Sep 12 '14 at 11:04
  • Okay now that's the clue I needed! See you are referencing "absolute" X and Y coordinates, they change if you scroll. Change your code to this (twice!) and it works fine! currX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - canvas.offsetLeft; currY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - canvas.offsetTop; This includes scroll offset and thus makes drawing work on scrolled pages. I also updated the page above so you can test. – 0ff Sep 12 '14 at 21:25
  • 1
    Hey there, I cannot reproduce this, can you please try to reproduce this on my page? dev-sep.force.com/testCanvas If the issue is not happening there, please make sure you replaced both variables twice, once in start and once in draw. Also please share a link to your page so that we can test it. Thank you! – 0ff Sep 13 '14 at 16:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.