JSFiddle - React, Tailwind, and code Playground

by dudi do

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>

<button id="goLeft"><</button>
<button id="goRight">></button>
<button id="goUp">Up</button>
<button id="goDown">Down</button>
<div id="canvasContainer">
    <canvas id="c" width="400" height="400"></canvas>
</div>

CSS

#canvasContainer {border: dotted gray thin ;}

JavaScript

var canvas = new fabric.Canvas('c') ;
canvas.backgroundColor = "#ffff00";
var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});


var triangle = new fabric.Triangle({
   fill: 'green', left: 200, top: 200
});
canvas.add(circle, triangle) ;
//canvas.zoomToPoint(new fabric.Point(canvas.getCenter().left, canvas.getCenter().top,1)) ;

$(function(){
   
    $('#zoomIn').click(function(){
        canvas.setZoom(canvas.getZoom() * 1.1 ) ;
    }) ;
    
    $('#zoomOut').click(function(){
        canvas.setZoom(canvas.getZoom() / 1.1 ) ;
    }) ;
    
    $('#goRight').click(function(){
        var units = 10 ;
        var delta = new fabric.Point(units,0) ;
        canvas.relativePan(delta) ;
    }) ;
    
    $('#goLeft').click(function(){
        var units = 10 ;
        var delta = new fabric.Point(-units,0) ;
        canvas.relativePan(delta) ;
    }) ;
    $('#goUp').click(function(){
        var units = 10 ;
        var delta = new fabric.Point(0,-units) ;
        canvas.relativePan(delta) ;
    }) ;
    
    $('#goDown').click(function(){
        var units = 10 ;
        var delta = new fabric.Point(0,units) ;
        canvas.relativePan(delta) ;
    }) ;
    
}) ;