Mi pequeño esfuerzo. Le agregue un color aleatorio para que se hagan formas más interesantes. <code>document.addEventListener("mousedown"...

Mi pequeño esfuerzo. Le agregue un color aleatorio para que se hagan formas más interesantes.

document.addEventListener("mousedown", dibujarTeclado);
var canvas = document.getElementById("engine");
var papel = canvas.getContext("2d");

const teclas = {
    izquierda: 37,
    arriba: 38,
    derecha: 39,
    abajo: 40
};

var current_posx = 300 / 2;
var current_posy = 300 / 2;

var colors = ["red", "blue", "green"];

function dibujarTeclado(evento)
{
    console.log(evento);

    var target_posx = evento.clientX;
    var target_posy = evento.clientY;

    var random_color = colors[Math.floor(Math.random() * colors.length)];

    dibujarLinea(random_color, current_posx, current_posy, target_posx, target_posy, papel);

    current_posx = target_posx;
    current_posy = target_posy;
}

function dibujarLinea(color, xfrom, yfrom, xto, yto, lienzo)
{
    lienzo.beginPath();
    lienzo.lineWidth = 3;
    lienzo.strokeStyle = color;
    lienzo.moveTo(xfrom, yfrom);
    lienzo.lineTo(xto, yto);
    lienzo.stroke();
    lienzo.closePath();
}```