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

var 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',

});
canvas.add(circle, 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*newzoom;
                    var tempTop = top*newzoom;

                    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();

/*                     canvas.setZoom(1)  // reset zoom so pan actions work as expected
                    vpw = canvas.width / zoom
                    vph = canvas.height / zoom
                    x = (object.left - vpw / 2)  // x is the location where the top left of the viewport should be
                    y = (object.top - vph / 2)  // y idem
                    canvas.absolutePan({x:x, y:y})
                    canvas.setZoom(zoom) */

        
    }) ;
    
    $('#zoomOut').click(function(){
                var...