Ciao Licina94,
utilizzando un canvas per far apparire una linea in realtà ti basta una cosa del genere:
codice:
<!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var ultimoPunto = { x: null, y: null };
      canvas.onclick = function (evt) {
          //si recupera la distanza dall'angolo in alto a sinistra (0) del canvas
          var rect = canvas.getBoundingClientRect();
          //si imposta un punto ottenuto dalla differenza tra il click sul client (tutta l'area che vedi) e la posizione del canvas
          //in pratica il click avviene in un punto x-y relativo a tutto il client (a tutta la pagina diciamo),
          //quindi per "trasportare" le coordinate relative solo al canvas (e non a tutta la pagina) devi considerare la posizione di quest'ultimo
          //se ad esempio il click avviene a x=20 e y=20, questo parte dal margine in alto a sinistra della pagina e si sposterà di 20 verso destra e di 20 dall'alto
          //ma se il canvas a sua volta parte da x=10 e y=10, allora viene da se che la tua linea deve partire da x=10 e y=10 (relativo al canvas) e non da zero come da coordinate
          //ricvate dal click (che sarebbero da x=0;y=0 a x=20;y=20, quando invece a te interessa che sia da x=10;y=10, ovvero dall'inizio del canvas)
          var punto = {
              x: evt.clientX - rect.left,
              y: evt.clientY - rect.top
          };
          //disegno una linea tra l'ultimo punto rilevato (ultimo click) e il nuovo punto
          if (ultimoPunto.x && ultimoPunto.y) {
              context.beginPath();
              context.moveTo(ultimoPunto.x, ultimoPunto.y);
              context.lineTo(punto.x, punto.y);
              context.stroke();              
          }
          //imposto questo punto come ultimo
          ultimoPunto = punto;
      };
    </script>
</body>