Freedrawn lines sometimes rendered wrong

[ingridmarleen]

I have a problem which sometimes also occurs on the demo page.
When drawing a freehand, the line is flattened at some point (see blue one in image). This line supposed to be like the other two, with a little curve.

Is this something of the canvas element itself or something in fabric?

I am using firefox.

[asturur]

you could try disable objectCaching.
http://fabricjs.com/fabric-object-caching
Being so flattened on one side i would think the bounding box is wrong.

[ingridmarleen]

Thanks! I'll try en let you know if this helped

[ingridmarleen]

unfortunately, it is not working. Some code we use (it is inside an extension of our application)

`var defaults = {
isDrawingMode: true,
selection: false,
backgroundImage: false, // Give it as a string
existingImage: false, // Give it as a string
freeDrawingBrush: {
color:'#F81816', // red
width: 6 // medium thinkness
},
canvasWidth: 214,
canvasHeight: 488,
objectCaching: false
};

    var config = $j.extend(true, defaults, options);

var myCanvas = new fabric.Canvas(target + '_canvas', {
isDrawingMode: config.isDrawingMode,
selection: config.selection,
backgroundImage: config.backgroundImage,
objectCaching: config.objectCaching
});

var brushWidth = config.freeDrawingBrush.width;

    myCanvas.freeDrawingBrush.color = config.freeDrawingBrush.color;
    myCanvas.freeDrawingBrush.width = brushWidth;

    // IvB Add the already drawn image, if exists
    fabric.Image.fromURL(config.existingImage, function(image) {myCanvas.add(image);});

$j('.colors button').click(function() {
// Set back the pencilBrush in case we were erasing first
// Set back to last width and set color to this value
myCanvas.freeDrawingBrush = new fabric.PencilBrush(myCanvas);
myCanvas.freeDrawingBrush.width = brushWidth;
myCanvas.freeDrawingBrush.color = $j(this).val();
});

    $j('.linethickness button').click(function() {
        brushWidth = $j(this).val() || 6;
        myCanvas.freeDrawingBrush.width = brushWidth;
    });

    /* IvB We are not really erasing, but painting back the original background image with patternbrush
     * We are creating the image only once because of performance issues
     */
    var img = new Image();
    img.src = config.backgroundImage;

    $j('.eraser').click(function() {
        var texturePatternBrush = new fabric.PatternBrush(myCanvas);
        texturePatternBrush.source = img;
        texturePatternBrush.width = 10;
        myCanvas.freeDrawingBrush = texturePatternBrush;
    });`

[ingridmarleen]

Sorry, the code is not entirely copied right here.

[ingridmarleen]

Also when drawing a straight line, it is making it much smaller

[asturur]

feels like complete custom code.
Please replicate the issue in a small clear jsfiddle with fabricjs and some simple js code. If not possible is nothing we can help here

[ingridmarleen]

The code is just setting options of fabric, nothing more. Only thing is, we have some different background images so we load it dynamically.

[ingridmarleen]

Your own demo is doing it also, see lowest stroke. Try using width 4 or 6, those are giving most problems

[asturur]

from @ingridmarleen

You asked me to come up with a fiddle instead of code in our own application. Well, I didn't need to. In my previous issue I posted a screenshot of the freedraw demo where I have the same problem and now I also have one in the kitchensink. (see picture, the greyish lines had to be thicker black ones, almost straight)
I'm posting this issue to mock at you, It is just a problem I have.
It seems that the rendered object width doesn't add the width of the line when drawing a line that's almost straight.

[ingridmarleen]

In the above, I meant to say I'm NOT posting this issue to mock at you, I'm sorry for the typo.

I have a fiddle here.
https://jsfiddle.net/5jf94fq6/

But there, you also have t try to draw lines, because it will not save the lines I drew.

It seems the interpolation isn't totally right.
Maybe it is just a problem with thin lines, but something isn't rendering well.

We also tried in Chrome, unfortunately ending up the same.
We'll try to draw a line now with the circleBrush instead of the pencilBrush.

[asturur]

Looks like i cannot get it because i m on a retina screen. It could be a problem of clipping because of small dimension and pixels.

Like a path is meant to be 3.5 pixels width, cache will be 3 or 4 not 3.5 and this may cause the issue. i guess adding a Math.ceil to cache dimension and adding 1 or 2 pixels at extra safe margin could fix the issue.

[ingridmarleen]

@asturur in which function(s) do I have to change something to try if this works?

[ingridmarleen]

In the makeBoundingBoxFromPoints function?

[asturur]

fixed with #3596

[ingridmarleen]

Wow great, I was gonna try today but you are a step ahead. Thanks!