title: Kinetic.js - Draw a freehandline by following mousepointer
body: <p>I am new in Javascript and Kinetics and I need to implement a function to draw a freehandline with Kinetics.Js. I found this example but works only with start and endpoint. I will draw in realtime by following the mousepointer...I do not know how to change the functions or push some new coordinates...</p>
  
  <p>Do you have an idea?</p>
  
  <pre><code>var moving = false;
  
  
  function createLine() {
      line = new Kinetic.Line({
          points: [0, 0, 0, 0],
          stroke: "red",
          strokeWidth: 2,
          id: 'line',
          name: 'line',
          draggable: true
      });
      lineLayer.add(line);
      addHoverEffect(lineLayer, line);
      lineLayer.draw();
  }
  
  function drawLine() {
      stage.on("mousedown touchstart", function () {
          createLine();
  
          if (moving) {
              moving = false;
              lineLayer.draw();
          } else {
              var pos = stage.getPointerPosition();
  
              //start point and end point are the same
              line.getPoints()[0].x = parseInt(pos.x);
              line.getPoints()[0].y = parseInt(pos.y);
              line.getPoints()[1].x = parseInt(pos.x);
              line.getPoints()[1].y = parseInt(pos.y);
  
              moving = true;
              lineLayer.drawScene();
          }
      });
      stage.on("mousemove touchmove", function () {
          if (moving) {
  
              var pos = stage.getPointerPosition();
  
              line.getPoints()[1].x = parseInt(pos.x);
              line.getPoints()[1].y = parseInt(pos.y);
              moving = true;
              lineLayer.drawScene();
          }
      });
      stage.on("mouseup touchend", function () {
          moving = false;
          removeLineDrawEvents();
      });
  }
  </code></pre>