Generated drawing gives unexpected output

Question

I'm trying to generate a drawing based on mouse events and I'm noticing some interesting rendering behavior that I can't explain why it's happening that way. Here's a jsbin that shows this example: https://jsbin.com/qiqetoy/edit?html,output

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.2.0/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Free Drawing Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    Tool:
    <select id="tool">
      <option value="brush">Brush</option>
      <option value="eraser">Eraser</option>
    </select>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight - 25;

      // first we need Konva core things: stage and layer
      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var isPaint = false;
      var mode = 'brush';
      var lastLine;

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

      stage.on('mouseup touchend', function() {
        isPaint = false;
      });

      // and core function - drawing
      stage.on('mousemove touchmove', function(e) {
        if (!isPaint) {
          return;
        }

        const pos = e.pos;
        var newPoints = lastLine.points().concat([pos.x, pos.y]);
        lastLine.points(newPoints);
        layer.batchDraw();
      });

      var select = document.getElementById('tool');
      select.addEventListener('change', function() {
        mode = select.value;
      });

        const line = [{
            "et": "md",
            "x": 109,
            "y": 94
        }, {
            "et": "mm",
            "x": 110,
            "y": 98
        }, {
            "et": "mm",
            "x": 110,
            "y": 103
        }, {
            "et": "mm",
            "x": 110,
            "y": 111
        }, {
            "et": "mm",
            "x": 110,
            "y": 116
        }, {
            "et": "mm",
            "x": 110,
            "y": 123
        }, {
            "et": "mm",
            "x": 110,
            "y": 129
        }, {
            "et": "mm",
            "x": 110,
            "y": 135
        }, {
            "et": "mm",
            "x": 110,
            "y": 141
        }, {
            "et": "mm",
            "x": 110,
            "y": 143
        }, {
            "et": "mm",
            "x": 110,
            "y": 147
        }, {
            "et": "mm",
            "x": 110,
            "y": 150
        }, {
            "et": "mm",
            "x": 111,
            "y": 152
        }, {
            "et": "mm",
            "x": 114,
            "y": 155
        }, {
            "et": "mm",
            "x": 112,
            "y": 154
        }, {
            "et": "mm",
            "x": 117,
            "y": 155
        }, {
            "et": "mm",
            "x": 120,
            "y": 155
        }, {
            "et": "mm",
            "x": 123,
            "y": 154
        }, {
            "et": "mm",
            "x": 127,
            "y": 151
        }, {
            "et": "mm",
            "x": 131,
            "y": 148
        }, {
            "et": "mm",
            "x": 135,
            "y": 145
        }, {
            "et": "mm",
            "x": 139,
            "y": 140
        }, {
            "et": "mm",
            "x": 142,
            "y": 137
        }, {
            "et": "mu"
        }, ];

        line.forEach(point => {
            if (point.et === 'mm') {
                stage.fire('mousemove', {
                    pos: {
                        x: point.x,
                        y: point.y
                    }
                });
            } else if (point.et == 'md') {
                stage.fire('mousedown', {
                    pos: {
                        x: point.x,
                        y: point.y
                    }
                });
            } else if (point.et === 'mu') {
                stage.fire('mouseup', {
                    pos: {
                        x: point.x,
                        y: point.y
                    }
                });
            }
        });      
    </script>
  </body>
</html>

Here's the interesting part of that drawing:

You can see above that there're a couple of sharp edges/lines that're drawn at the curve. I can't explain how this is happening. You can also clearly see that it's not 5px wide (the stroke width is set at 5px).

Can someone who's got more experience with canvas/konvajs drawing help explain what's happening here and what should I do to get rid of this behavior?

Thanks, K

score 1 · Accepted Answer · answered Mar 25 '20 at 02:33

I think I figured out what the issue here is. The data seems to have an issue. Here's the JSBin that isolates the data in question. https://jsbin.com/nayado/edit?html,output

{
        "et": "md",
        "x": 110,
        "y": 147
    }, {
        "et": "mm",
        "x": 110,
        "y": 150
    }, {
        "et": "mm",
        "x": 111,
        "y": 152
    }, {
        "et": "mm",
        "x": 114,
        "y": 155
    }, {
        "et": "mm",
        "x": 112,
        "y": 154
    }, {
        "et": "mm",
        "x": 117,
        "y": 155
    }, {
        "et": "mu"
    },

The data seems to be out of order which is probably what's causing the issue. I need to now figure out how's the canvas generating touch events that seem to be out of order.

Generated drawing gives unexpected output

1 Answers1