JSFiddle - React, Tailwind, and code Playground

by robert chang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="zoomIn">+</button>
<button id="zoomOut">-</button>
<div id="canvasContainer">
    <canvas id="c" width="400" height="400" border="1px solid red"></canvas>
</div>

CSS

#canvasContainer {display:inline-block; border: dotted gray thin ;}

JavaScript

window.canvas = new fabric.Canvas('c') ;

var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100,
  originX: 'center',
  originY: 'center',
});


/* var triangle = new fabric.Triangle({
   fill: 'green', left: 200, top: 200,
   originX: 'center',
   originY: 'center',

}); */
window.triangle = new fabric.Rect({
   fill: 'green', left: 200, top: 200,
   width: 100, height: 100,
   originX: 'center',
   originY: 'center',

});
canvas.add(triangle) ;
//canvas.zoomToPoint(new fabric.Point(canvas.getCenter().left, canvas.getCenter().top,1)) ;

$(function(){
   
    $('#zoomIn').click(function(){
                var zoom = canvas.getZoom();
                var newzoom = 1.1*zoom;
                var objects = canvas.getObjects();
                var tempobj = ''
                for (var i in objects) {
                    var scaleX = objects[i].scaleX;
                    var scaleY = objects[i].scaleY;
                    var left = objects[i].left;
                    var top = objects[i].top;

                    var tempScaleX = scaleX * newzoom;
                    var tempScaleY = scaleY * newzoom;
                    var tempLeft = left+ left*(1-newzoom)/2;
                    var tempTop = top+ top*(1-newzoom)/2;

                    objects[i].scaleX = tempScaleX;
                    objects[i].scaleY = tempScaleY;
                    objects[i].left = tempLeft;
                    objects[i].top = tempTop;
                    objects[i].setCoords();
                    tempobj = objects [i];

                }
                canvas.renderAll();
                canvas.calcOffset();
                for (var i in objects) {
                 var obj = objects[i];
                	console.log('t:'+obj.top+' l:'+obj.left+' w:'+obj.getWidth()+ ' h:' +obj.getHeight());
                }

/*                     canvas.setZoom(1)  // reset zoom so pan actions work as expected
                    vpw = canvas.width / zoom
                   ...