Estoy intentnado guardar el contenido de un canvas html5 de un modal a otro un poco más pequeño, esto es para hacer un panel de firma digital de documentos por medio de una tableta de firmas. tengo un primer canvas
que al hacer click en el despliega un modal en el cual tengo otro canvas más grande para poder firmar mejor. Este dibujo, me gustaría poder hacer que al hacer click en guardar, se cierre el modal, pero ese dibujo se muestre en mi otro modal, con su tamaño adecuado. Estaba pensando en guardar el contenido de el primer canvas y posteriormente cargar la imagen en el otro canvas
, pero no se si es la mejor opción... También pensé en guardar la imagen, guardar la ruta en la DB y posteriormente cargar el contenido de la imagen por medio de ajax, tampoco se si es la mejor opción. Lo que me gustaría es que al guardar el canvas grande, se cierre el modal y se muestre el contenido en el otro canvas y una vez se envíe el formulario, se guarde la imagen y la ruta en la DB
. Para el back estoy trabajando con Laravel 7
.
Con este código muestro el modal y puedo dibujar, a parte borrar el contenido, y me gustaría hacer lo que comento:
$("#canvas").on("click", function(){
$("#myModal").modal('show');
// could be 3d, if you want to make a video game
canvas.width = window.innerWidth;
canvas.height = 500;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 5;
ctx.strokeStyle = '#ac0000';
let isDrawing = false;
let lastX = 0;
let lastY = 0;
function draw(e) {
if(!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
}
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);
});
$("#borrarCanvas").on('click', function(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
});