Arrow is not drawn correctly on fabricJS canvas

Question

I'm working on a project in which several shapes (rectangle, triangle, ellipse, ..) can be drawn on a fabricJS canvas. Now I'm implementing the functionality to draw an arrow. This arrow consists out of two shapes, a line and a triangle (arrow head). They are added to the canvas as a group object but the problem is that the arrow is not drawn correctly on the canvas. (see this picture ).

Below is my code to draw the arrow:

drawShape: function(canvas, shape) {

        let selectedShape;
        let pointer, startX, startY, origX, origY;
        let rect, ellipse, line, triangle, arrow;

        let stroke = 'black';
        let fill = 'transparent';

 canvas.on('mouse:down', function(option) {

    if(option.target != null) {
         return;
    } else {

         switch(shape)
         {

           case 'arrow' :

             pointer = canvas.getPointer(option.e);                         
             let arrowLinePoints = [pointer.x, pointer.y, pointer.x, pointer.y];

             startX = pointer.x;
             startY = pointer.y;

             line = new fabric.Line(arrowLinePoints, {
                 top: startY,
                 left: startX,
                 fill: fill,
                 stroke: stroke,
             });

             // reference points for arrowhead
             origX = line.x2;
             origY = line.y2;

             let dx = line.x2 - line.x1,
                 dy = line.y2 - line.y1;

             /* calculate angle of arrow */
             let angle = Math.atan2(dy, dx);
             angle *= 180 / Math.PI;
             angle += 90;

             arrow = new fabric.Triangle({
                 angle: angle,
                 fill: 'black',
                 top: line.y2,
                 left: line.x2,
                 width: 1,
                 height: 1,
                 originX: 'center',
                 originY: 'center',
                 stroke: stroke
             });


              let grp = new fabric.Group([line, arrow], {
                 top: startY,
                 left: startX,
                 width: 1,
                 height: 1,
                 hasBorders: true,
                 hasControls: true,
              });

              selectedShape = grp;

              break;

      }

      canvas.add(selectedShape);  


      canvas.on("mouse:move", function(option) {

            switch(shape) {

              case 'arrow' :
                   pointer = canvas.getPointer(option.e);     

                   selectedShape.set({
                       width: Math.abs(startX -pointer.x),
                       height: Math.abs(startY - pointer.y)
                   });
                   selectedShape.setCoords();                        

                   line = selectedShape.item(0);
                   line.set({
                        x2: pointer.x, 
                        y2: pointer.y,
                        left: selectedShape.left,
                        top: selectedShape.top
                    });
                    line.setCoords();

                     let dx = line.x2 - line.x1,
                         dy = line.y2 - line.y1;

                      let angle = Math.atan2(dy, dx);
                      angle *= 180 / Math.PI;
                      angle += 90;

                      arrow = selectedShape.item(1);
                      arrow.set({
                               top: line.y2, 
                               left: line.x2, 
                               angle: angle,
                               width: 15, 
                               height: 15
                       });  
                       arrow.setCoords();

                       canvas.renderAll();

                       break;
               }
  });  

canvas.on('mouse:up', function() {

   canvas.off('mouse:move');                      
});

JSFiddle: https://jsfiddle.net/9408k1gb/

Is there a way to fix this? Thanks in advance!

Kind regards,

Sven

Answer 1

I think that adding the line and arrow to the group and then moving them around was causing some problems. I shifted the code around so that the arrow and line are only joined into a group once the drawing is done and that seemed to fix the issue. The basics of what I did was wait until the mouse:up event and then take care of the group like so:

canvas.deactivateAll();
canvas.remove(line);
canvas.remove(arrow);
selectedShape = new fabric.Group([line, arrow], {
    hasBorders: true,
    hasControls: true,
});
canvas.add(selectedShape);

https://jsfiddle.net/9408k1gb/1/