json.stringify: After resizing of an object height and width properties are not updated

Question

Next code create triangles on canvas, if you are not clicking over an existing triangle. And you may save all elements to JSON with clicking on "save" button.Then preview the JSON variable in console.

My problem is that after resizing of an object, height and width are not updated in Json, when clicked on save again. To resize the triangle You have to click on it. Then grab one of the anchor rectangles and drag it from the center of triangle.

What action must I perform to have also new height and width of the object?

Next is code snippet on jsFfidle: https://jsfiddle.net/ug7p9myc/76/

 var canvas = new fabric.Canvas('c5'); function some1(x1, y2) { var c = new fabric.Triangle({ left: posX2, top: posY2, width: 15, height: 25, strokeWidth: 3, fill: '#666', stroke: '#666' }); canvas.add(c); } var posX2, posY2; canvas.on('mouse:down', function(e) { var pointer = canvas.getPointer(ee); posX2 = pointer.x; posY2 = pointer.y; if (e.target) {} else { some1(posY2, posY2); } }); function saveJsonF() { var jsonToPHP = JSON.stringify(canvas.toObject()); console.log(jsonToPHP); } document.getElementById("saveJsonID").onclick = saveJsonF; 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script> <input type="button" class="Btn1" id="saveJsonID" value="Save" /></br><br> <canvas id="c5" width="1060" height="550" style="border: 1px solid black"></canvas> 

Answer 1

Use getScaledWidth and getScaledHeight to get the transformed values. If you scale an object, its scaleX and scaleY value changes.