te paso el código que uso yo para temas de firmas digitales con el que podrás dibujar en el canvas.
<title>Nueva</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--TODO: PDF-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<canvas id="pizarra" class="mb-5 border"></canvas>
<script>
var hoy = new Date();
var dd = hoy.getDate();
var mm = hoy.getMonth();
var yyyy = hoy.getFullYear();
var meses = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'];
$('#fecha_firmado').text(dd + ' de ' + meses[mm] + ' del ' + yyyy);
//======================================================================
// VARIABLES
//======================================================================
let miCanvas = document.querySelector('#pizarra');
let lineas = [];
let correccionX = 0;
let correccionY = 0;
let pintarLinea = false;
let posicion = miCanvas.getBoundingClientRect()
correccionX = posicion.x;
correccionY = posicion.y;
if (screen.availHeight < 780) {
miCanvas.width = 300;
miCanvas.height = 150;
} else {
miCanvas.width = 1100;
miCanvas.height = 500;
}
//======================================================================
// FUNCIONES
//======================================================================
/**
* Funcion que empieza a dibujar la linea
*/
function empezarDibujo() {
pintarLinea = true;
lineas.push([]);
};
if (screen.availHeight < 780) {
var dependencia = 1
} else {
var dependencia = 5
}
function dibujarLinea(event) {
event.preventDefault();
if (pintarLinea) {
let ctx = miCanvas.getContext('2d')
// Estilos de linea
ctx.lineJoin = ctx.lineCap = 'round';
ctx.lineWidth = dependencia;
// Color de la linea
ctx.strokeStyle = 'black';
// Marca el nuevo punto
let nuevaPosicionX = 0;
let nuevaPosicionY = 0;
if (event.changedTouches == undefined) {
// Versión ratón
nuevaPosicionX = event.layerX;
nuevaPosicionY = event.layerY;
} else {
// Versión touch, pantalla tactil
nuevaPosicionX = event.changedTouches[0].pageX - correccionX;
nuevaPosicionY = event.changedTouches[0].pageY - correccionY;
}
// Guarda la linea
lineas[lineas.length - 1].push({
x: nuevaPosicionX,
y: nuevaPosicionY
});
// Redibuja todas las lineas guardadas
ctx.beginPath();
lineas.forEach(function(segmento) {
if (segmento[0]) { //TODO: solucion fallo de no detectar la linea
ctx.moveTo(segmento[0].x, segmento[0].y);
} else {
}
segmento.forEach(function(punto, index) {
ctx.lineTo(punto.x, punto.y);
});
});
ctx.stroke();
}
}
/**
* Funcion que deja de dibujar la linea
*/
function pararDibujar() {
pintarLinea = false;
}
//======================================================================
// EVENTOS
//======================================================================
// Eventos raton
miCanvas.addEventListener('mousedown', empezarDibujo, false);
miCanvas.addEventListener('mousemove', dibujarLinea, false);
miCanvas.addEventListener('mouseup', pararDibujar, false);
// Eventos pantallas táctiles
miCanvas.addEventListener('touchstart', empezarDibujo, false);
miCanvas.addEventListener('touchmove', dibujarLinea, false);
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>