After draw a object is there a way to added a text to that object in fabric js

Question

In my application i'm planning to draw object using fabric js. In here i'm drawing rectangles using mouse. After i finished drawing a rectangle i want to added a text(name variable). The text must on top of the rectangle.And also i need only to draw a single rectangle. After that drawing mood should stop and selecting function should activated.Is that possible with fabric js.

 var canvas = new fabric.Canvas('canvas1', { selection: false }); var Name = "This is a rectangle"; function drawrec() { var rect, isDown, origX, origY; removeEvents(); changeObjectSelection(false); canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; var pointer = canvas.getPointer(oe); rect = new fabric.Rect({ left: origX, top: origY, originX: 'left', originY: 'top', width: pointer.x - origX, height: pointer.y - origY, angle: 0, selectable:false, fill: '#07ff11a3', stroke: 'black', transparentCorners: false }); canvas.add(rect); }); canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); if (origX > pointer.x) { rect.set({ left: Math.abs(pointer.x) }); } if (origY > pointer.y) { rect.set({ top: Math.abs(pointer.y) }); } rect.set({ width: Math.abs(origX - pointer.x) }); rect.set({ height: Math.abs(origY - pointer.y) }); canvas.renderAll(); }); canvas.on('mouse:up', function(o) { isDown = false; rect.setCoords(); }); } function enableSelection() { removeEvents(); changeObjectSelection(true); canvas.selection = true; } function changeObjectSelection(value) { canvas.forEachObject(function (obj) { obj.selectable = value; }); canvas.renderAll(); } function removeEvents() { canvas.isDrawingMode = false; canvas.selection = false; canvas.off('mouse:down'); canvas.off('mouse:up'); canvas.off('mouse:move'); } 

 <div class="fullpage"> <div class="section"> <a class="thmb" href="#" onclick="drawrec()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Rectangle</a> <a class="thmb" href="#" onclick="enableSelection()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Selection</a> <div class="canvas-container"> <canvas id="canvas1" style="border: 1px solid;width: 500px;height: 500px"></canvas> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script> 

Answer 1

onmouseup you can create a text object and make a group with rect object. then add to canvas.

DEMO

 var canvas = new fabric.Canvas('canvas1', { selection: false }); var Name = "This is a rectangle"; function drawrec() { var rect, isDown, origX, origY; removeEvents(); changeObjectSelection(false); canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; var pointer = canvas.getPointer(oe); rect = new fabric.Rect({ left: origX, top: origY, originX: 'left', originY: 'top', width: pointer.x - origX, height: pointer.y - origY, angle: 0, selectable:false, fill: '#07ff11a3', stroke: 'black', transparentCorners: false }); canvas.add(rect); }); canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); if (origX > pointer.x) { rect.set({ left: Math.abs(pointer.x) }); } if (origY > pointer.y) { rect.set({ top: Math.abs(pointer.y) }); } rect.set({ width: Math.abs(origX - pointer.x) }); rect.set({ height: Math.abs(origY - pointer.y) }); canvas.renderAll(); }); canvas.on('mouse:up', function(o) { isDown = false; rect.setCoords(); var text = new fabric.Text(Name,{ left:rect.left, top:rect.top, fontSize: 20 }); var group = new fabric.Group([rect,text]); canvas.remove(rect); canvas.add(group); group.addWithUpdate(); enableSelection(); }); } function enableSelection() { removeEvents(); changeObjectSelection(true); canvas.selection = true; } function changeObjectSelection(value) { canvas.forEachObject(function (obj) { obj.selectable = value; }); canvas.renderAll(); } function removeEvents() { canvas.isDrawingMode = false; canvas.selection = false; canvas.off('mouse:down'); canvas.off('mouse:up'); canvas.off('mouse:move'); } 

 <div class="fullpage"> <div class="section"> <a class="thmb" href="#" onclick="drawrec()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Rectangle</a> <a class="thmb" href="#" onclick="enableSelection()" style="padding: 0px 10px;margin:5px;border: 2px solid;">Selection</a> <div class="canvas-container"> <canvas id="canvas1" width= 400 height= 400 style="border: 1px solid;"></canvas> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script>