0

I try to use canvas and describe something by hand phone using Salesforce1 app. When I weite vertically, the screen is also scrolled, so cannot write well.

Anyone knows how to make scrolling disabled when writing on the canvas element.

Below is the code that I made.

component

<aura:component implements="flexipage:availableForAllPageTypes">
     <ltng:require scripts="{!$Resource.jquery}" afterScriptsLoaded="{!c.handleAfterJqueryLoaded}"/>
     <canvas id="signatureCanvas" style="border:3px solid black;width:90%;height:320px;" ></canvas>
 </aura:component>

controller

handleAfterJqueryLoaded: function(component, event, helper){
    helper.canvas = document.getElementById("signatureCanvas");
    helper.context = helper.canvas.getContext("2d");
    helper.context.strokeStyle = "black";
    helper.context.lineWidth = "2";
    helper.isDrawing = false;
    $("#signatureCanvas").on("mousedown touchstart", function(event){
        helper.start(component, event, helper);
        event.preventDefault();
    });
    $("#signatureCanvas").on("mousemove touchmove", function(event){
        helper.draw(component, event, helper);
        event.preventDefault();
    });
    $("#signatureCanvas").on("mouseup mouseout touchend", function(event){
        helper.stop(component, event, helper);
    });

    //★here is not working well..★
    $("#signatureCanvas").on('touchstart.noScroll touchmove.noScroll', function(event) {
        helper.draw(component, event, helper);
        event.preventDefault();
    });
}

helper

//global variables
canvas:"", context:"", isDrawing:false, prevX:0, prevY:0, currX:0, currY:0,
//method
start : function(component, event, helper){
    event.preventDefault();
    //draw start method..
},
draw : function(component,event,helper){
    event.preventDefault();
    //drawing method..
    }
},
stop : function(component,event,helper){
    //draw stop method..
}

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.