close canvas path to avoid random white gaps

[Allidylls]

Some white lines exist between triangle shapes when drawing on canvas. Just close the path.

[qrohlf]

Do you have a before/after example on this? Seems like drawing the path back to the 0 point should be a no-op?

[Allidylls]

Yes, the spectral result image with before code:

Then, after close canvas path:

My browser is firefox 66.0.4, and the code:

function generate() {
    var the_canvas = document.getElementById('the-canvas');
    the_canvas.width = $('#the-width').val();
    the_canvas.height = $('#the-height').val();

    var pattern = Trianglify({
        width: parseInt($('#the-width').val(), 10),
        height: parseInt($('#the-height').val(), 10),
        cell_size: parseInt($('#the-cell').val(), 10),
        x_colors: $('#the-color').val()
    });
    pattern.canvas(the_canvas);
}

$('#the-button').click(function(evt) {
    generate();
});

It is obvious that the before image have random flaws.

[qrohlf]

Ah. This makes sense to me now. Trianglify, in an effort to cover up canvas/svg antialiasing artifacts with coincident lines, uses the stroke_width parameter to perform some "overdraw" and basically ensure that the shapes overlap enough to force a "correct" antialiasing background and avoid the white lines problem. The unfortunate side effect of this parameter is it causes the corners where the lines between shapes meet to get messy.

The canvas implementation was only getting the stroke-overdraw on 2 sides, since the path was open. Drawing back to the original point here is applying the stroke on the third side, which fixes the issue (and also gives us back messier corners in the canvas implementation).

This is definitely an improvement, thanks for finding it. I'd still like to find a solution at some point that doesn't make for messy corners, but that's my fault here, not yours!

[Allidylls]

Set stroke_width to 0 can make clean corners.

[umeshabhat]

Pulled the latest build, and this still issue exists.