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

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


    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) {    
        isDrawing = true;    
        prevX = currX;    
        prevX = currY;    
        currX = event.clientX - canvas.offsetLeft;    
        currY = event.clientY - canvas.offsetTop;
        context.fillStyle = "cadetblue";    
        context.fillRect(currX, currY, 2, 2);

    function draw(event) {    

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

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

    function stop(event) {    
        if (isDrawing) {
            isDrawing = false;    

    function clearSign() {    

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

    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,

    function processResult(result) {    
        window.location.href = '/'+accountId;   

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


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%">
            <td width="5%"></td>
             <td width="15%"><apex:outputText >Upload</apex:outputText></td>


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 Commented Sep 11, 2014 at 2:59
  • Where are you trying to add your HTML? Commented Sep 11, 2014 at 8:47

1 Answer 1


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
    Commented Sep 12, 2014 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
    Commented Sep 12, 2014 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
    Commented Sep 12, 2014 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
    Commented Sep 12, 2014 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
    Commented Sep 13, 2014 at 16:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .