Como realizar una app para poder firmar digital mente

Aquí puedes preguntar o compartir tus dudas y conocimientos acerca del programa
buen día gente hoy vengo con una tremenda duda de como poder realizar una app que sea capaz de conectarse a una base de datos realizar una consulta en dicha base de datos y que en el resultado sea capaz de poder uno firmar de recibido y se guarde en la base de datos la firma.

ejemplo:

Imagen


busco ideas de como hacerlo ya que he estado buscando por internet y no logro encontrar nada útil para poder arrancar el desarrollo.


Nota: ya he logrado encontrar algo con canvas y funciona bien pero es un código web se me ocurre hacer una web app llamar la pagina dentro de una app para hacer mas facil el trabajo ahora solo toca hacer que guarde el dibujo.

les comparto el código.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo canvas mano alzada</title>
<style type="text/css">
.centrador{
box-sizing: border-box;
display: block;
width: 100%;
margin: 0 0 auto;
margin-top: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class='centrador'>
<canvas id='canvas' width="400" height="200" style='border: 1px solid #CCC;'>
<p>Tu navegador no soporta canvas</p>
</canvas>
</div>
<div class='centrador'>
<form id='formCanvas' method='post' action='#' ENCTYPE='multipart/form-data'>
<button type='button' onclick='LimpiarTrazado()'>Borrar</button>
<button type='button' onclick='GuardarTrazado()'>Guardar</button>
<input type='hidden' name='imagen' id='imagen' />
</form>
</div>

<script type="text/javascript">
/* Variables de Configuracion */
var idCanvas='canvas';
var idForm='formCanvas';
var inputImagen='imagen';
var estiloDelCursor='crosshair';
var colorDelTrazo='#555';
var colorDeFondo='#fff';
var grosorDelTrazo=2;

/* Variables necesarias */
var contexto=null;
var valX=0;
var valY=0;
var flag=false;
var imagen=document.getElementById(inputImagen);
var anchoCanvas=document.getElementById(idCanvas).offsetWidth;
var altoCanvas=document.getElementById(idCanvas).offsetHeight;
var pizarraCanvas=document.getElementById(idCanvas);

/* Esperamos el evento load */
window.addEventListener('load',IniciarDibujo,false);

function IniciarDibujo(){
/* Creamos la pizarra */
pizarraCanvas.style.cursor=estiloDelCursor;
contexto=pizarraCanvas.getContext('2d');
contexto.fillStyle=colorDeFondo;
contexto.fillRect(0,0,anchoCanvas,altoCanvas);
contexto.strokeStyle=colorDelTrazo;
contexto.lineWidth=grosorDelTrazo;
contexto.lineJoin='round';
contexto.lineCap='round';
/* Capturamos los diferentes eventos */
pizarraCanvas.addEventListener('mousedown',MouseDown,false);
pizarraCanvas.addEventListener('mouseup',MouseUp,false);
pizarraCanvas.addEventListener('mousemove',MouseMove,false);
pizarraCanvas.addEventListener('touchstart',TouchStart,false);
pizarraCanvas.addEventListener('touchmove',TouchMove,false);
pizarraCanvas.addEventListener('touchend',TouchEnd,false);
pizarraCanvas.addEventListener('touchleave',TouchEnd,false);
}

function MouseDown(e){
flag=true;
contexto.beginPath();
valX=e.pageX-posicionX(pizarraCanvas); valY=e.pageY-posicionY(pizarraCanvas);
contexto.moveTo(valX,valY);
}

function MouseUp(e){
contexto.closePath();
flag=false;
}

function MouseMove(e){
if(flag){
contexto.beginPath();
contexto.moveTo(valX,valY);
valX=e.pageX-posicionX(pizarraCanvas); valY=e.pageY-posicionY(pizarraCanvas);
contexto.lineTo(valX,valY);
contexto.closePath();
contexto.stroke();
}
}

function TouchMove(e){
e.preventDefault();
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0];
MouseMove(touch);
}
}

function TouchStart(e){
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0];
MouseDown(touch);
}
}

function TouchEnd(e){
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0];
MouseUp(touch);
}
}

function posicionY(obj) {
var valor = obj.offsetTop;
if (obj.offsetParent) valor += posicionY(obj.offsetParent);
return valor;
}

function posicionX(obj) {
var valor = obj.offsetLeft;
if (obj.offsetParent) valor += posicionX(obj.offsetParent);
return valor;
}

/* Limpiar pizarra */
function LimpiarTrazado(){
contexto=document.getElementById(idCanvas).getContext('2d');
contexto.fillStyle=colorDeFondo;
contexto.fillRect(0,0,anchoCanvas,altoCanvas);
}

/* Enviar el trazado */
function GuardarTrazado(){
imagen.value=document.getElementById(idCanvas).toDataURL('image/png');
document.forms[idForm].submit();
}
</script>


<?php if (isset($_POST['imagen'])) { ?>
<div class='centrador'>
<img src="<?php echo $_POST['imagen'];?>" border="1">
</div>
<?php } ?>

</body>
</html>
assim amigo ?
Imagen
I see that the location of the mouse can be stored while typing in any database
and then a comparison between any two signatures
and determine the percentage of the difference between them
and then this is the ratio of the match between them


Gracias
dripro escribió:
15 May 2019 02:10
assim amigo ?
Esa función en ams si ya la se usar yo lo implemente en un programa que realice ya tiempos el detalle ahora es que ocupo una aplicación para androi conectándome a mi base de datos sql, lo que no he logrado hacer es una firma que se guarde.
abood1987 escribió:
16 May 2019 01:34
I see that the location of the mouse can be stored while typing in any database
and then a comparison between any two signatures
and determine the percentage of the difference between them
and then this is the ratio of the match between them


Gracias
Gracias por tu respuesta colega, lo que busco es hacer una aplicación similar a la de fedex o dhl que cuando te entregan un paquete uno firma de recibido en una maquina.

no es lo que busco pero gracias.
Creo que la seguridad del software es muy importante. Para proteger información importante.