JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>
<div>
<button onclick="verkleincanvas()" style="background-color: #a0c637; color:white; border:none;">verklein canvas</button>
<button onclick="vergrootcanvas()" style="background-color: #a0c637; color:white; border:none;">vergroot canvas</button>
</div>


<div style="display:inline-block;">
<canvas id="canvas" width="500px"  height="500px" style="border:1px solid #000000; display:inline-block;"></canvas>

JavaScript

var canvas = new fabric.Canvas('canvas');

canvas.add(
  new fabric.Rect({
    fill: 'red',
    width: 50,
    left: 50,
    top: 100,
    height: 50
  }));

function vergrootcanvas() {
  canvas.setDimensions({
    width: canvas.getWidth() * 1.2,
    height: canvas.getHeight() * 1.2
  });
  //canvas.centerObject(canvas.clipPath);
  canvas.forEachObject(function(obj) {
    canvas.centerObject(obj);
    canvas.renderAll();
  });
}


function verkleincanvas() {
  canvas.setDimensions({
    width: canvas.getWidth() * 0.8,
    height: canvas.getHeight() * 0.8
  });
  //canvas.centerObject(canvas.clipPath);
  canvas.forEachObject(function(obj) {
    canvas.centerObject(obj);
  });
  canvas.renderAll();
}