Tengo este código a continuación que me permite tomar notas en un lienzo. Lo que ahora quiero hacer es cuando alguien presiona un botón de enviar, esencialmente cargar las notas en mi base de datos. Así que solo necesito una forma de leer el lienzo en el botón de enviar.
<html> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <body> <canvas id="canvas" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas> <input type="button" value="Clear" class="canvas-clear" /> </body> </html> <script> $(document).ready(function() { var flag, dot_flag = false, prevX, prevY, currX, currY = 0, color = 'black', thickness = 2; var $canvas = $('#canvas'); var ctx = $canvas[0].getContext('2d'); $canvas.on('mousemove mousedown mouseup mouseout', function(e) { prevX = currX; prevY = currY; currX = e.clientX - $canvas.offset().left; currY = e.clientY - $canvas.offset().top; if (e.type == 'mousedown') { flag = true; } if (e.type == 'mouseup' || e.type == 'mouseout') { flag = false; } if (e.type == 'mousemove') { if (flag) { ctx.beginPath(); ctx.moveTo(prevX, prevY); ctx.lineTo(currX, currY); ctx.strokeStyle = color; ctx.lineWidth = thickness; ctx.stroke(); ctx.closePath(); } } }); $('.canvas-clear').on('click', function(e) { c_width = $canvas.width(); c_height = $canvas.height(); ctx.clearRect(0, 0, c_width, c_height); $('#canvasimg').hide(); }); }); </script>No estoy seguro de por dónde empezar o si esto es posible, espero alguna ayuda aquí.