Hi i have created a VF page to capture signature uisng this link
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> 
