Develop Reference

fabric.js: 4.2 control does not show when select object

I'm just download fabric.js from http://fabricjs.com/build/ with select all and just simple code as below.
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({ width: 79, height: 59, left: 190, top: 100, fill: '#f55', strokeWidth: 1, stroke: 'black' });
canvas.add(rect);
There is no rotate and resize control at all and also
canvas.item(0).set({
borderColor: 'red',
cornerColor: 'green',
cornerSize: 6
})
would not work.
Any suggestion for this case?

The build look like to be broken, you can download fabric.js with npm (https://www.npmjs.com/package/fabric) or download the release from the github page: https://github.com/fabricjs/fabric.js/releases/tag/v4.2.0

Fabric Js can't set value originY bottom

Tell me, can anyone come across such a problem.
I need to change the reference point of the coordinate system from LT to LB. On the official website there is a test for applying different origins ( http://fabricjs.com/test/misc/origin.html ).
In my project, I was not able to change originY, the same when using fiddle
https://jsfiddle.net/borneoBlack/pz4rbken/6/
var rect = new fabric.Rect({
width: 20,
height: 20,
left: 10,
top: 10,
angle: 0,
fill: '#000',
originX: 'left',
//originY: 'bottom' - does not work
originY: 'top'
});

originX and originY reffer to origin of the object related to TL corner of the canvas.
What you can do is to parse all the objects in canvas and adjust the position of the blocks.
Check the following example:
https://jsfiddle.net/6m034se2/
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
width: 20,
height: 20,
left: 10,
top: 10,
angle: 0,
fill: '#000',
originX: 'left',
//originY: 'bottom' - does not work
originY: 'top'
});
canvas.add(rect);
canvas.getObjects().forEach(function(block){
block.top = canvas.getHeight() - block.top - block.height;
block.setCoords();
})
canvas.renderAll();

Adding a border to circle object fabricjs

I'm trying to add a border to a circle. The only round about way I can think of is by adding another circle underneath it. Is there a better way?
fiddle: http://jsfiddle.net/9mqqh3of/4/
PS: having trouble centering it too.
HTML:
<canvas id="c" width="300" height="300"></canvas>
Javascript:
var canvas = new fabric.Canvas('c');
let radius = 20;
let radius1 = 10;
let circle = new fabric.Circle({
fill: "green",
hoverCursor: "pointer",
left: 20 - radius,
opacity: 1,
radius,
selectable: false,
strokeWidth: 5,
strokeColor: "white",
top: 20 - radius
});
let circle1 = new fabric.Circle({
fill: "red",
hoverCursor: "pointer",
left: 20 - radius1,
opacity: 1,
radius: radius1,
top: 20 - radius1
});
canvas.add(circle);
canvas.add(circle1);

Use stroke for stroke color and strokeWidth for width of stroke.
DEMO
let canvas = new fabric.Canvas('canvas');
let circle = new fabric.Circle({
fill: "green",
hoverCursor: "pointer",
left: 20,
opacity: 1,
radius:100,
selectable: false,
strokeWidth: 15,
stroke: "red",
top: 20
});
canvas.add(circle)
canvas {
border:1px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>

Fabric JS Replace Objects with Same Item(ID)

I need to replace the Circle shape with Rectangle shape with same Item Number used by canvas
First I created Circle :
canvas.add(new fabric.Circle({
left: 200,
top: 200,
radius: 30,
fill: 'gray',
stroke: 'black',
strokeWidth: 3}));
Then replace with Rectangle:
var Rectangle = new fabric.Rect({
width: 100,
height: 150,
fill: 'blue',
stroke: 'red' });
Assume that Circle is canvas.item(0) i need to replace Rectangle with same Id canvas.item(0) :
Something like This :
canvas.item(0).replace(Rectangle);

You can remove the rectangle with canvas.remove(Circle)
and add the new item with canvas.insertAt(Rectangle, 0, false).
see: insertAt fabricJS Docs

After adding a path to a group in fabricjs, toSVG() gives an svg image that is different from the canvas layout

I have a group of shapes that are supposed to be moved and scaled together on the canvas. For doing this I added all of these to a fabric Group. One of the shape is a fabric Path. While it adds properly on the canvas, when converting the Canvas to SVG, it changes it's position.
I have made a fiddle for it : http://jsfiddle.net/RZcY7/4/
Export svg button will push the svg data to console. click there to open it in browser. It can be seen that the position of triangle(which is a fabric Path) is different on canvas and svg.
Here's the code:
var DefaultGroupSettings = {
originX: 'center',
originY: 'center',
hasBorders: true,
hasControls: true,
hasRotatingPoint: true,
lockUniScaling: true
};
var canvas = new fabric.Canvas(document.getElementById('c'));
var rect = new fabric.Rect({
width: 100,
height: 100,
left: 50,
top: 50,
angle: 30,
fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
radius: 50,
left: 175,
top: 75,
fill: '#aac'
});
var group = new fabric.Group([rect, circle], DefaultGroupSettings);
canvas.add(group);
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({
top: 150,
left: 100
});
group.addWithUpdate(path);
canvas.renderAll();
Is it an issue to add a Path to a Group? If yes, how can I club Path and an Object together?
Thanks in advance!