JavaScript - Signature/Image Clears when figure/stylus lifted

I’m using this to capture signatures to a database and save them to a patient record.
On a desktop it works as expected but on a cell phone or tablet I’m having issues.
When the user is signing if they lift their figure/stylus the signature clears, so they can’t add dots or cross the ‘t’ or add space between first and last names.
Is there something I can add to make this function on a mobile device?
I don’t want anything to be cleared unless the user specifically selects the Eraser function.
I usually never use JavaScript (because I never learned it) so I’m truly unsure how to fix this or even what my options are…
Please Help Love Erin

Marker Eraser

        <input type="button" id="btnSave" value="Approve Image" />
        <asp:Button ID="btnStoreImage" runat="server" OnClick="btnStoreImage_OnClick" Text="Store Image" />
        <asp:HiddenField ID="HiddenField1" runat="server" Value="" />
        <asp:HiddenField ID="SigType" runat="server" Value="" />
<img id="imgCapture" alt="" style="display: none; border: 1px solid #ccc" hidden="hidden" />
<script type="text/javascript" src=""></script>
<script src="" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $(".tools a").eq(0).attr("style", "color:#000");
        $(".tools a").click(function () {
            $(".tools a").removeAttr("style");
            $(this).attr("style", "color:#000");
        $("#btnSave").bind("click", function () {
            var base64 = $('#colors_sketch')[0].toDataURL();
            $("#HiddenField1").attr("value", base64);
            //$("#imgCapture").attr("src", base64);

Not sure but I’m guessing you may have to listen for touch or pointer events.