Fabric: Adding image to group
by Vijay Gujar
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.4/fabric.min.js"></script>
<canvas id="mycanvas" width="400" height="400">
</canvas>
CSS
#mycanvas {
border: 1px solid black;
}
JavaScript
var canvas = new fabric.Canvas('mycanvas');
window.group = new fabric.Group([], {left: 50, top: 50, originX: 'left', originY: 'top', width: 100, height:100});
var fabricPathObject = new fabric.Path("M100,200 C100, 100 400,100 400,200", {
fill : undefined,
stroke: "red",
strokeWidth: 1,
left: -50,
top: -50,
strokeUniform: true,
});
fabricPathObject.scaleX = group.width / fabricPathObject.width;
fabricPathObject.scaleY = group.height / fabricPathObject.height;
group.add(fabricPathObject);
var text1 = new fabric.IText('V', {
fill: 'red',
fontSize: 30,
originX: 'center',
originY: 'center',
// group: this,
//canvas: canvas,
left: -60,
top: 0
});
text1.setCoords();
group.add(text1);
group.left = 0;
group.top = 0;
group.setCoords(0);
canvas.add(group);
canvas.renderAll();