Search code examples
javascriptcanvashtml5-canvaskonvajskonva

Konvajs drawing first point when move drawing line around



I have the following problem: I'm using konvajs to build a canvas where you can draw for example lines in it. Plus you should be able to move these lines around. Untill here no problems, giving the lines the draggable attributes everything works fine. But when I move the lines I still draw a point at the beginning. How can I prevent this first point drawing when I move the line?

I used the simple draw demo for the start, so I have a mousedown event for the drawing function

stage.on('mousedown touchstart', function (e) {
  isPaint = true;
  var pos = stage.getPointerPosition();
  lastLine = new Konva.Line({
    stroke: strokeColor,
    strokeWidth: 5,
    draggable: true,
    lineCap: 'round',
    globalCompositeOperation:
      mode === 'brush' ? 'source-over' : 'destination-out',
    points: [pos.x, pos.y],
  });
  layer.add(lastLine);
});

Solution

  • stage.on('mousedown touchstart', function (e) {
      // start drawing only when we are on empty area
      const onEmptySpace = e.target.getLayer() === backgroundLayer;
      if (!onEmptySpace) {
        return;
      }
      isPaint = true;
      var pos = stage.getPointerPosition();
      lastLine = new Konva.Line({
        stroke: strokeColor,
        strokeWidth: 5,
        draggable: true,
        lineCap: 'round',
        globalCompositeOperation:
          mode === 'brush' ? 'source-over' : 'destination-out',
        points: [pos.x, pos.y],
      });
      layer.add(lastLine);
    });