fabric.js strokeWidth bug ?

fabric.js를 사용하다가

new fabric.Path, new fabric.Line, new fabric.Polygon 들을 new fabric.Group으로 묶어서 사용할 경우,

초기 설정(strokeWidth: 3, stroke: 'yellow')   

-> 마우스 오버 이벤트(strokeWidth: 6, stroke: 'red') -> 마우스 아웃 이벤트(strokeWidth: 3, stroke: 'yellow') 로 작동시

문제: 

일부 픽셀에서 red 잔상이 남는 현상이 발생한다. (화면을 확대하면, 더 많은 픽셀에서 발생, 크롬브라우저)

해결:

초기 설정(strokeWidth: 6, stroke: 'yellow')   -> 캔바스에  add 후 수정(strokeWidth: 3, stroke: 'yellow'), canvas.renderAll();

-> 마우스 오버 이벤트(strokeWidth: 6, stroke: 'red') -> 마우스 아웃 이벤트(strokeWidth: 3, stroke: 'yellow') 로 작동하면, red 잔상은 사라진다.

이유: 

[정상1] : 그룹을 사용하지 않고 단독으로 canvas에 추가한 경우. strokeWidth가 변경되면, 자동으로 범위가 조정 되면서 알맞게 strokeWidth가 적용된다. (마우스 클릭해보면 영역이 나옴.)

[비정상1] : 그룹을 사용한 경우, element의 strokeWidth가 변경되더라도 그룹 영역 범위가 조정되지 않는다. 그로인해 red 잔상이 남는다.

[정상2] : 그룹을 사용한 경우라도, 초기에 element의 strokeWidth를 크게 잡고 시작해서, 그룹 영역 범위를 크게 잡아버리면, 나중에 red 잔상이 남지 않는다.

정상1

비정상1

정상2