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

Link which i have used

http://corycowgill.blogspot.in/2013/12/capturing-signatures-with-html5-canvas.html

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>