Image stroke

[asturur]

I will post screenshot to check i did not broke anything, but looks like that we have some mess in the stroke rendering under certain conditions.

[asturur]

_stroke is called by the _render function, _setStrokeStyle has been already done.

[asturur]

This looks like an un-optimization, but in my opinion it simplify the rendering flow for the dev.

[asturur]

The point is that every shape do its path in the _render function and then we call .fill(); and .stroke();

Image was the only one that was doing differently, it was drawing the eventual border inside the renderStroke with strokeRect function and then not doing the ctx.stroke();

I think that getting 4 lineTo instead of strokeRect is slower, but we get a cleaner pipeline.

Oh, also we had a very very rare bug:

If someone would stroke with dash Array and gradient with gradientTransform, well, gradientTransform was not applied... no one notice in 2 years so not so popular combination

[asturur]

Also look this code:

// add red rectangle
var rect = new fabric.Rect({
  width: 50,
  height: 50,
  left: 50,
  top: 50,
});
rect.setGradient('fill', { type:'linear',
                        x1: 0, 
                        y1: 0, 
                        x2: 0, 
                        y2: rect.height,
                        colorStops: { 0 : 'rgba(0,255,0,1)', 1 : 'rgba(0,0,255,1)'} });

// add line
var line = new fabric.Line([10,10,10,60], {strokeWidth: 50});
line.setGradient('stroke', { type:'linear',
                        x1: 0, 
                        y1: 0, 
                        x2: 0, 
                        y2: rect.height,
                        colorStops: { 0 : 'rgba(0,255,0,1)', 1 : 'rgba(0,0,255,1)'} });
canvas.add(rect);
canvas.add(line);

look results:

left rectangle, right a chubby line. We are not translating the gradient for stroke ( and so patterns!!!)

[asturur]

new SVG IMPORT

real SVG

current SVG IMPORT