Free drawing error example

by Ben Gillbanks

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<p>Draw a line with a large decimate value and the end point will often be decimated leaving a gap between where the pointer is released, and where the line ends.</p>

<p>I think the line should always end where the pointer is released.</p>

<canvas style="border: 2px solid; " height="485" width="632" id="c"></canvas>

CSS

* {
    line-height: 1.5;
}

body {
    padding: 0 20px;
    margin: 0;
}

p {
    font-family: Georgia, serif;
    max-width: 30em;
}

JavaScript

(function() {

    var canvas = this.__canvas = new fabric.Canvas(
        'c', 
        { isDrawingMode: true }
    );

    canvas.freeDrawingBrush = new fabric.PencilBrush( canvas );
    canvas.freeDrawingBrush.decimate = 80;
    canvas.freeDrawingBrush.width = 10;
    canvas.freeDrawingBrush.color = 'green';
    
})();