1

I have a requirement to capture user's signature using <canvas> and save it to a record. It is working with mouse but not when using touch screen devices like mobile phones. Below is my code:

<div style="width:38%;margin:0 auto;" align="center">
                            <apex:pageBlock >
                                <apex:pageBlockSection columns="1">
                                    <apex:repeat value="{!fieldSetsCase}" var="a">
                                        <apex:inputField label="{!a.label}" value="{!objCase[a.fieldPath]}" styleClass="{!a.fieldPath} slds-input"/><br/>
                                    </apex:repeat>
                                </apex:pageBlockSection>

                                <div data-role="page" id="signatureCaptureHome" align="right">
                                    <div data-role="content">
                                        <h1 id="recordSigId" align="left" style="margin-left:30px;height:5px">Signature</h1>
                                        <canvas id="signatureCanvas" height="140px" width="435px" style="border:1px solid #000000;margin-right:5px;"/><br/>
                                        <canvas id="blank" height="140px" width="435px" style="display:none"/>
                                    </div> 
                                </div><br/>

                                <input type="button" id="clearSignButton"  name="clear" onclick="clearSign();" class="slds-button slds-button--neutral" value="Clear Signature"/>
                                <input type="reset" id="clearButton" name="reset" align="right" class="slds-button slds-button--neutral" style="margin-left:10px" />
                                <input type="button" id="submit" value="Submit" align="right" class="slds-button slds-button--neutral" style="margin-left:10px" />
                            </apex:pageBlock>

                        </div>

 <script type="text/javascript">

        var canvas;
        var context;
        var drawingUtil;
        var isDrawing = false;
        var prevX, prevY, currX, currY = 0;

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

        //Start Event for Signature Captuare on Canvas
        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();
        }

        //Event while someone is drawing to caputre the path while they draw
        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();    
            }   
        }

        //Event when someone stops drawing their signature line
        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 = "#FFF";
        context.lineWidth = "2";
        drawingUtil = new DrawingUtil(canvas);

        function callMethod() {
            var strDataURI = canvas.toDataURL();
            strDataURI = strDataURI.replace(/^data:image\/(png|jpg);base64,/, "");
            console.log('strDataURI', strDataURI);
            callClass(strDataURI);
        }

        document.getElementById('submit').addEventListener('click',function(){
            if(canvas.toDataURL() == document.getElementById('blank').toDataURL()){

                var divs = document.getElementsByClassName("toast");
                divs[0].classList.remove('slds-hide');
                setTimeout(function() {
                    var divs = document.getElementsByClassName("toast");
                    divs[0].classList.add('slds-hide');
                }, 3000); 

            } else {
                callMethod();
            }
        });

    </script>

Do I miss something important here that's causing it not to work with touch screens? Any help will be appreciated.

Your Answer

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

Browse other questions tagged or ask your own question.