Maintaining object size and position for new fabric js objects like text,etc., (acoording to general canvas)

Question

Right now I'm using this program. I took an existing code from this page https://github.com/fabricjs/fabric.js/issues/2946 and modified by adding some buttons for add text (and edit it). And It worked, everytime I click on the button "Add text", the text appear on canvas; but the problem is that when I click "zoom in/ out" buttons, and press again the button "Add text", the text is not positioned and sized on canvas as I expected. Apparentlly the text is getting smaller or bigger every time I press "zoom in/out" buttons, the same happens with the positioning of the new text. The position is not as expected. What I want is that the new text appear on canvas keeping the scale and positioning according to the general canvas. For example, positioned always in the center and the same big (according to general canvas).

This is the code right now: jsfiddle

 // var $ = function(id){return document.getElementById(id)}; var canvas = this.__canvas = new fabric.Canvas('c'); canvas.setHeight(300); canvas.setWidth(500); var img = new Image(); img.onload = function() { canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {}); } img.src = "https://static.cineclick.com.br/sites/adm/uploads/banco_imagens/31/602x0_1439644246.jpg"; $("#btnZoomIn").click(function() { zoomIn(); }); $("#btnZoomOut").click(function() { zoomOut(); }); $("#btnResetZoom").click(function() { resetZoom(); }); function zoomIn() { canvas.setZoom(canvas.getZoom() * 1.1); canvas.renderAll(); } function zoomOut() { canvas.setZoom(canvas.getZoom() * 0.9); canvas.renderAll(); } function resetZoom() { canvas.setZoom(1); canvas.renderAll(); } function Addtext() { canvas.add(new fabric.IText('Tap and Type', { left: 50, top: 100, fontFamily: 'arial black', fill: '#333', fontSize: 50 })); } document.getElementById('text-color').onchange = function() { canvas.getActiveObject().setFill(this.value); canvas.renderAll(); }; document.getElementById('text-color').onchange = function() { canvas.getActiveObject().setFill(this.value); canvas.renderAll(); }; document.getElementById('text-bg-color').onchange = function() { canvas.getActiveObject().setBackgroundColor(this.value); canvas.renderAll(); }; document.getElementById('text-lines-bg-color').onchange = function() { canvas.getActiveObject().setTextBackgroundColor(this.value); canvas.renderAll(); }; document.getElementById('text-stroke-color').onchange = function() { canvas.getActiveObject().setStroke(this.value); canvas.renderAll(); }; document.getElementById('text-stroke-width').onchange = function() { canvas.getActiveObject().setStrokeWidth(this.value); canvas.renderAll(); }; document.getElementById('font-family').onchange = function() { canvas.getActiveObject().setFontFamily(this.value); canvas.renderAll(); }; document.getElementById('text-font-size').onchange = function() { canvas.getActiveObject().setFontSize(this.value); canvas.renderAll(); }; document.getElementById('text-line-height').onchange = function() { canvas.getActiveObject().setLineHeight(this.value); canvas.renderAll(); }; document.getElementById('text-align').onchange = function() { canvas.getActiveObject().setTextAlign(this.value); canvas.renderAll(); }; radios5 = document.getElementsByName("fonttype"); // wijzig naar button for (var i = 0, max = radios5.length; i < max; i++) { radios5[i].onclick = function() { if (document.getElementById(this.id).checked == true) { if (this.id == "text-cmd-bold") { canvas.getActiveObject().set("fontWeight", "bold"); } if (this.id == "text-cmd-italic") { canvas.getActiveObject().set("fontStyle", "italic"); } if (this.id == "text-cmd-underline") { canvas.getActiveObject().set("textDecoration", "underline"); } if (this.id == "text-cmd-linethrough") { canvas.getActiveObject().set("textDecoration", "line-through"); } if (this.id == "text-cmd-overline") { canvas.getActiveObject().set("textDecoration", "overline"); } } else { if (this.id == "text-cmd-bold") { canvas.getActiveObject().set("fontWeight", ""); } if (this.id == "text-cmd-italic") { canvas.getActiveObject().set("fontStyle", ""); } if (this.id == "text-cmd-underline") { canvas.getActiveObject().set("textDecoration", ""); } if (this.id == "text-cmd-linethrough") { canvas.getActiveObject().set("textDecoration", ""); } if (this.id == "text-cmd-overline") { canvas.getActiveObject().set("textDecoration", ""); } } canvas.renderAll(); } } 

  #c{ border:1px solid red; top:22px; left:0px; height: 100%; width: 99%; } .box { float: left; margin: 1em; } .after-box { clear: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <button id="btnZoomIn">ZoomIn</button> <button id="btnZoomOut">ZoomOut</button> <button id="btnResetZoom">Reset Zoom</button> <br/> <button onclick="Addtext()">Add Texto</button> <div class="box"> <canvas id="c"></canvas> </div> <div id="text-wrapper" style="margin-top: 10px" ng-show="getText()"> <div id="text-controls"> <input type="color" value="" id="text-color" size="10"> <label for="font-family" style="display:inline-block">Font family:</label> <select id="font-family"> <option value="arial">Arial</option> <option value="helvetica" selected>Helvetica</option> <option value="myriad pro">Myriad Pro</option> <option value="delicious">Delicious</option> <option value="verdana">Verdana</option> <option value="georgia">Georgia</option> <option value="courier">Courier</option> <option value="comic sans ms">Comic Sans MS</option> <option value="impact">Impact</option> <option value="monaco">Monaco</option> <option value="optima">Optima</option> <option value="hoefler text">Hoefler Text</option> <option value="plaster">Plaster</option> <option value="engagement">Engagement</option> </select> <br> <label for="text-align" style="display:inline-block">Text align:</label> <select id="text-align"> <option value="left">Left</option> <option value="center">Center</option> <option value="right">Right</option> <option value="justify">Justify</option> </select> <div> <label for="text-bg-color">Background color:</label> <input type="color" value="" id="text-bg-color" size="10"> </div> <div> <label for="text-lines-bg-color">Background text color:</label> <input type="color" value="" id="text-lines-bg-color" size="10"> </div> <div> <label for="text-stroke-color">Stroke color:</label> <input type="color" value="" id="text-stroke-color"> </div> <div> <label for="text-stroke-width">Stroke width:</label> <input type="range" value="1" min="1" max="5" id="text-stroke-width"> </div> <div> <label for="text-font-size">Font size:</label> <input type="range" value="" min="1" max="120" step="1" id="text-font-size"> </div> <div> <label for="text-line-height">Line height:</label> <input type="range" value="" min="0" max="10" step="0.1" id="text-line-height"> </div> </div> <div id="text-controls-additional"> <input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold <input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic <input type='checkbox' name='fonttype' id="text-cmd-underline" > Underline <input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough <input type='checkbox' name='fonttype' id="text-cmd-overline" > Overline </div> <a href="http://stackoverflow.com/questions/35053171/editor-text-fabricjs-itext-format-letters-and-simultaneous-selection-textdecor" target="_blank"><h1>Stack Overflow</h1> </a> 

Hope you can help me

Answer 1

left: 50/canvas.getZoom(),
top: 100/canvas.getZoom(),
fontSize: 50/canvas.getZoom()

Use these values for text object to get same size in all zoom level.

DEMO

 // var $ = function(id){return document.getElementById(id)}; var canvas = this.__canvas = new fabric.Canvas('c'); canvas.setHeight(300); canvas.setWidth(500); var img = new Image(); img.onload = function() { canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {}); } img.src = "https://static.cineclick.com.br/sites/adm/uploads/banco_imagens/31/602x0_1439644246.jpg"; $("#btnZoomIn").click(function() { zoomIn(); }); $("#btnZoomOut").click(function() { zoomOut(); }); $("#btnResetZoom").click(function() { resetZoom(); }); function zoomIn() { canvas.setZoom(canvas.getZoom() * 1.1); canvas.renderAll(); } function zoomOut() { canvas.setZoom(canvas.getZoom() * 0.9); canvas.renderAll(); } function resetZoom() { canvas.setZoom(1); canvas.renderAll(); } function Addtext() { canvas.add(new fabric.IText('Tap and Type', { left: 50/canvas.getZoom(), top: 100/canvas.getZoom(), fontFamily: 'arial black', fill: '#333', fontSize: 50/canvas.getZoom() })); } document.getElementById('text-color').onchange = function() { canvas.getActiveObject().setFill(this.value); canvas.renderAll(); }; document.getElementById('text-color').onchange = function() { canvas.getActiveObject().setFill(this.value); canvas.renderAll(); }; document.getElementById('text-bg-color').onchange = function() { canvas.getActiveObject().setBackgroundColor(this.value); canvas.renderAll(); }; document.getElementById('text-lines-bg-color').onchange = function() { canvas.getActiveObject().setTextBackgroundColor(this.value); canvas.renderAll(); }; document.getElementById('text-stroke-color').onchange = function() { canvas.getActiveObject().setStroke(this.value); canvas.renderAll(); }; document.getElementById('text-stroke-width').onchange = function() { canvas.getActiveObject().setStrokeWidth(this.value); canvas.renderAll(); }; document.getElementById('font-family').onchange = function() { canvas.getActiveObject().setFontFamily(this.value); canvas.renderAll(); }; document.getElementById('text-font-size').onchange = function() { canvas.getActiveObject().setFontSize(this.value); canvas.renderAll(); }; document.getElementById('text-line-height').onchange = function() { canvas.getActiveObject().setLineHeight(this.value); canvas.renderAll(); }; document.getElementById('text-align').onchange = function() { canvas.getActiveObject().setTextAlign(this.value); canvas.renderAll(); }; radios5 = document.getElementsByName("fonttype"); // wijzig naar button for (var i = 0, max = radios5.length; i < max; i++) { radios5[i].onclick = function() { if (document.getElementById(this.id).checked == true) { if (this.id == "text-cmd-bold") { canvas.getActiveObject().set("fontWeight", "bold"); } if (this.id == "text-cmd-italic") { canvas.getActiveObject().set("fontStyle", "italic"); } if (this.id == "text-cmd-underline") { canvas.getActiveObject().set("textDecoration", "underline"); } if (this.id == "text-cmd-linethrough") { canvas.getActiveObject().set("textDecoration", "line-through"); } if (this.id == "text-cmd-overline") { canvas.getActiveObject().set("textDecoration", "overline"); } } else { if (this.id == "text-cmd-bold") { canvas.getActiveObject().set("fontWeight", ""); } if (this.id == "text-cmd-italic") { canvas.getActiveObject().set("fontStyle", ""); } if (this.id == "text-cmd-underline") { canvas.getActiveObject().set("textDecoration", ""); } if (this.id == "text-cmd-linethrough") { canvas.getActiveObject().set("textDecoration", ""); } if (this.id == "text-cmd-overline") { canvas.getActiveObject().set("textDecoration", ""); } } canvas.renderAll(); } } 

 #c{ border:1px solid red; top:22px; left:0px; height: 100%; width: 99%; } .box { float: left; margin: 1em; } .after-box { clear: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <button id="btnZoomIn">ZoomIn</button> <button id="btnZoomOut">ZoomOut</button> <button id="btnResetZoom">Reset Zoom</button> <br/> <button onclick="Addtext()">Add Texto</button> <div class="box"> <canvas id="c"></canvas> </div> <div id="text-wrapper" style="margin-top: 10px" ng-show="getText()"> <div id="text-controls"> <input type="color" value="" id="text-color" size="10"> <label for="font-family" style="display:inline-block">Font family:</label> <select id="font-family"> <option value="arial">Arial</option> <option value="helvetica" selected>Helvetica</option> <option value="myriad pro">Myriad Pro</option> <option value="delicious">Delicious</option> <option value="verdana">Verdana</option> <option value="georgia">Georgia</option> <option value="courier">Courier</option> <option value="comic sans ms">Comic Sans MS</option> <option value="impact">Impact</option> <option value="monaco">Monaco</option> <option value="optima">Optima</option> <option value="hoefler text">Hoefler Text</option> <option value="plaster">Plaster</option> <option value="engagement">Engagement</option> </select> <br> <label for="text-align" style="display:inline-block">Text align:</label> <select id="text-align"> <option value="left">Left</option> <option value="center">Center</option> <option value="right">Right</option> <option value="justify">Justify</option> </select> <div> <label for="text-bg-color">Background color:</label> <input type="color" value="" id="text-bg-color" size="10"> </div> <div> <label for="text-lines-bg-color">Background text color:</label> <input type="color" value="" id="text-lines-bg-color" size="10"> </div> <div> <label for="text-stroke-color">Stroke color:</label> <input type="color" value="" id="text-stroke-color"> </div> <div> <label for="text-stroke-width">Stroke width:</label> <input type="range" value="1" min="1" max="5" id="text-stroke-width"> </div> <div> <label for="text-font-size">Font size:</label> <input type="range" value="" min="1" max="120" step="1" id="text-font-size"> </div> <div> <label for="text-line-height">Line height:</label> <input type="range" value="" min="0" max="10" step="0.1" id="text-line-height"> </div> </div> <div id="text-controls-additional"> <input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold <input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic <input type='checkbox' name='fonttype' id="text-cmd-underline" > Underline <input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough <input type='checkbox' name='fonttype' id="text-cmd-overline" > Overline </div> <a href="http://stackoverflow.com/questions/35053171/editor-text-fabricjs-itext-format-letters-and-simultaneous-selection-textdecor" target="_blank"><h1>Stack Overflow</h1> </a>