В настоящее время я работаю над созданием приложения для подписи в laravel, используя в основном html и javascript, я уже умею рисовать на ПК, но я не могу рисовать на мобильном устройстве. Итак, мой вопрос: как я могу рисовать на мобильном устройстве?
Это приложение будет использоваться для подписки при доставке пакетов
@extends('layouts.app')
@section('content')
<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">
</head>
<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>
<div class="container">
<body onload="init()">
<canvas id="painter" name="painter" width="400" height="200" style="position:absolute;top:53%;left:4%;border:2px solid;"></canvas>
<img id="photo" name="photo" style="position:absolute;top:53%;left:4%;" style="display:none;">
<input class="btn btn-success" type="button" value="Opslaan" id="btn" size=15" onclick="save()" style="position:absolute;top:80%;left:4%;">
<input class="btn btn-danger" type="button" value="Leegmaken" id="clr" size="15" onclick="erase()" style="position:absolute;top:80%;left:4%;">
<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:40%;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="photo" id="photo">
<input type="hidden" name="order_nummer" value="<?php echo $aftekenens->order_nummer;?>">
<input class="btn btn-success" type="button" value="Opslaan" id="btn" size="30" onclick="save()" style="position:absolute;top:80%;left:17%;">
<button class="btn btn-primary" type="submit" style="position:absolute;top:85%;left:4%;">toevoegen</button>
<div style="position:absolute;top:45%;left: 4%;">
<label for="ingevulde_naam">Naam:</label> <input type="text" id="ingevulde_naam" name="ingevulde_naam" required>
</div>
<div style="position: absolute;top:50%;left:4%;">
Handtekening hier beneden zetten a.u.b. :
</div>
</form>
</body>
</div>
</html>
<script type="text/javascript">
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
touchX = 0,
touchY = 0,
dot_flag = false;
var x = "black",
y = 2;
function init() {
canvas = document.getElementById('painter');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
canvas.addEventListener("touchmove", touchMove, function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("touchstart", touchStart, function (e) {
findxy('start', e)
}, false);
canvas.addEventListener("touchend", touchEnd, function (e) {
findxy('end', e)
}, false);
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY,);
ctx.lineTo(currX, currY,);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function touchStart() {
getTouchPos();
draw(touchX, touchY);
event.preventDefault();
}
function touchMove(e) {
getTouchPos(e);
event.preventDefault();
draw(touchX,touchY);
}
function touchEnd() {
getTouchPos(e);
event.preventDefault();
draw(touchX, touchY);
}
function getTouchPos(e) {
if (!e)
if(e.touches) {
if(e.touches.length == 1){
var touch = e.touches[0];
touchX=touch.pageX-touch.target.offsetLeft;
touchY=touch.pageY-touch.target.offsetTop;
}
}
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
function erase()
{
ctx.clearRect(0, 0, w, h);
document.getElementById("photo").style.display = "none";
}
function save() {
var dataURL = canvas.toDataURL("image/png");
document.getElementById("photo").style.border = "2px solid";
document.getElementById("photo").src = dataURL;
document.getElementById("photo").style.display = "inline";
document.getElementById("src_image").value = dataURL;
}</script>