Как исправить кнопку стирания и сохранения после добавления мобильного сенсорного экрана

Question

Я написал веб-страницу в laravel, которая берет вашу подпись и сохраняет ее в базе данных. Но после того, как я наконец смог реализовать мобильное рисование, кнопки для сохранения (opslaan) и добавления (toevoegen) перестали работать. У меня был другой файл, в котором кнопки и все остальное работало для рисования на мобильных устройствах, так что теперь я попытался начать все сначала и сначала поработать с подписью на мобильных устройствах, и заставил это работать, и теперь кнопки больше не работают.

    <script>
    function signatureCapture() {
        var canvas = document.getElementById("newSignature");
        var context = canvas.getContext("2d");
        canvas.width = 400;
        canvas.height = 200;
        context.fillStyle = "#fff";
        context.strokeStyle = "#444";
        context.lineWidth = 1.5;
        context.lineCap = "round";
        context.fillRect(0, 0, canvas.width, canvas.height);
        var disableSave = true;
        var pixels = [];
        var cpixels = [];
        var xyLast = {};
        var xyAddLast = {};
        var calculate = false;
        {   //functions
            function remove_event_listeners() {
                canvas.removeEventListener('mousemove', on_mousemove, false);
                canvas.removeEventListener('mouseup', on_mouseup, false);
                canvas.removeEventListener('touchmove', on_mousemove, false);
                canvas.removeEventListener('touchend', on_mouseup, false);

                document.body.removeEventListener('mouseup', on_mouseup, false);
                document.body.removeEventListener('touchend', on_mouseup, false);
            }

            function get_coords(e) {
                var x, y;

                if (e.changedTouches && e.changedTouches[0]) {
                    var offsety = canvas.offsetTop || 0;
                    var offsetx = canvas.offsetLeft || 0;

                    x = e.changedTouches[0].pageX - offsetx;
                    y = e.changedTouches[0].pageY - offsety;
                } else if (e.layerX || 0 == e.layerX) {
                    x = e.layerX;
                    y = e.layerY;
                } else if (e.offsetX || 0 == e.offsetX) {
                    x = e.offsetX;
                    y = e.offsetY;
                }

                return {
                    x : x, y : y
                };
            };

            function on_mousedown(e) {
                e.preventDefault();
                e.stopPropagation();

                canvas.addEventListener('mouseup', on_mouseup, false);
                canvas.addEventListener('mousemove', on_mousemove, false);
                canvas.addEventListener('touchend', on_mouseup, false);
                canvas.addEventListener('touchmove', on_mousemove, false);
                document.body.addEventListener('mouseup', on_mouseup, false);
                document.body.addEventListener('touchend', on_mouseup, false);

                empty = false;
                var xy = get_coords(e);
                context.beginPath();
                pixels.push('moveStart');
                context.moveTo(xy.x, xy.y);
                pixels.push(xy.x, xy.y);
                xyLast = xy;
            };

            function on_mousemove(e, finish) {
                e.preventDefault();
                e.stopPropagation();

                var xy = get_coords(e);
                var xyAdd = {
                    x : (xyLast.x + xy.x) / 2,
                    y : (xyLast.y + xy.y) / 2
                };

                if (calculate) {
                    var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
                    var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
                    pixels.push(xLast, yLast);
                } else {
                    calculate = true;
                }

                context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
                pixels.push(xyAdd.x, xyAdd.y);
                context.stroke();
                context.beginPath();
                context.moveTo(xyAdd.x, xyAdd.y);
                xyAddLast = xyAdd;
                xyLast = xy;

            };

            function on_mouseup(e) {
                remove_event_listeners();
                disableSave = false;
                context.stroke();
                pixels.push('e');
                calculate = false;
            };
        }
        canvas.addEventListener('touchstart', on_mousedown, false);
        canvas.addEventListener('mousedown', on_mousedown, false);
    }

    function signatureSave() {
        var canvas = document.getElementById("newSignature");// save canvas image as data url (png format by default)
        var dataURL = canvas.toDataURL("image/png");
        document.getElementById("saveSignature").src = dataURL;
    };

    function signatureClear() {
        var canvas = document.getElementById("newSignature");
        var context = canvas.getContext("2d");
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
</script>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <div class="card-header">
        <h2 class="text-center">Leverings check</h2>
        <a href="{{route('tekenen.home')}}"><div class="btn btn-danger">Pagina terug</div></a>
    </div>
</head>


<table class="table">
    <thead class="thead-dark">
    <tr>
        <td  style="width: 10%">Klant</td>
        <td style="width: 10%">Klant nummer</td>
        <td style="width: 80%">ordernummer</td>
    </tr>
    </thead>
    <tbody>
    @foreach($order_nummer as $aftekenens)
        <tr>
            <td>{{$aftekenens->klant}}</td>
            <td>{{$aftekenens->klant_nummer}}</td>
            <td>{{$aftekenens->order_nummer}}</td>
        </tr>
    @endforeach
    </tbody>
</table>
<form action="{{route('tekenen.store')}}" method="POST">
    @csrf
    <div style="position:absolute;top:39%;left:4%;">
        <label for="coli">Aantal coli('s):</label> <input type="text" id="coli" name="coli" required>
        <br>
    </div>
    <input type="hidden" name="src_image" value="dataURL" id="src_image">
    <input type="hidden" name="saveSignature" id="saveSignature">
    <input type="hidden" name="order_nummer" value="<?php echo $aftekenens->order_nummer;?>">
    </div>

    <div style="position: absolute;top:43%;left:4%;">
        <label for="ingevulde_naam">Naam:</label>  <input type="text" id="ingevulde_naam" name="ingevulde_naam" required>
        <br>
        Handtekening hier beneden zetten a.u.b. :
    </div>
</form>

<div class="container">
    <canvas  id="newSignature"  width="400" height="200" style="position:absolute;top:50%;left:4%;border:2px solid;"></canvas>
</div>
<script>signatureCapture();</script>
<br>

<input class="btn btn-success" type="button"value="Opslaan" id="btn" style="position:absolute;top:72%;left:4%;" onclick="signatureSave()">
<input class="btn btn-danger" type="button" value="Leegmaken" id="clr" style="position:absolute;top:72%;left:9%;" onclick="signatureClear()">
<button class="btn btn-primary" type="submit" style="position:absolute;top:72%;left:15.2%;">toevoegen</button>
</br>
<img id="saveSignature" style="position:absolute;top:75%;" alt="Opgeslagen afbeelding"/>
</div>
</body>
</html>
    @endsection