JavaScript - crear lineas en canvas pero mediante el click y movimiento del mouse

document.addEventListener("mousedown", apretarMouse);

document.addEventListener("mousemove" ,moverMouse);

document.addEventListener("mouseup", terminarDibujo);

var miDibujo= document.getElementById("area_de_dibujo");

var papel=miDibujo.getContext("2d")

var estado=false;

var colorito="blue";

var x;

var y;

var xl;

var yl;

function apretarMouse(evento)

{

console.log(evento);

    estado= true;

  dibujarLinea(colorito, 100, 100, 0, 0,papel)

    x=evento.screenX;

    y=evento.screenY;

}

function moverMouse(evento)

{

console.log(evento)

 if(estado==true)

  {

   //var posision=posision+1;

   var xl= evento.screenX ;

   var yl= evento.screenY;

 dibujarLinea(colorito,yl,xl, papel)

    //x=evento.clientX;

    //y=evento.clientY;

  }

}

function terminarDibujo(evento)

{

  estado = false;

  x=evento.clientX;

  y=evento.clientY;

}

function dibujarLinea(colorito, xinicial, yinicial, xfinal, yfinal, lienzo)

{

  lienzo.beginPath();

  lienzo.strokeStyle = colorito;

  lienzo.moveTo(xinicial, yinicial);

  lienzo.lineTo(xfinal, yfinal);

  lienzo.stroke();

  lienzo.closePath();

}