JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<input type="button" id="zoom-out" value="Zoom Out">
<input type="button" id="zoom-in" value="Zoom In">
<input type="number" step=".25" id="zoom-level" value="1" />
<br/>
<input type="button" id="toPNG" value="To PNG" />
<input type="button" id="toSVG" value="To SVG" />
<canvas id="c" width="400" height="400" class="c"></canvas>

<p>PNG:</p>
<div id="png">

</div>
<p>SVG:</p>
<div id="svg">

</div>

CSS

canvas {
  border: 1px solid grey;
}

#zoom-level {
  width: 40px;
}

JavaScript

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#fff";

var obj = new fabric.Rect();
obj.set({
  width: 200,
  height: 200,
  top: 50,
  left: 50,
  fill: '#f55'
});

obj.setShadow({
  color: '#000',
  blur: 20,
  offsetX: 5,
  offsetY: 5
});

canvas.add(obj);

$('#zoom-out').click(function() {
  //zoom in
  canvas.setZoom(canvas.getZoom() * 0.9);
  canvas.setWidth(canvas.width * 0.9);
  canvas.setHeight(canvas.height * 0.9);
})

$('#zoom-in').click(function() {
  //zoom in
  canvas.setZoom(canvas.getZoom() * 1.1);
  canvas.setWidth(canvas.width * 1.1);
  canvas.setHeight(canvas.height * 1.1);
})

$('#zoom-level').on('change', function() {
  canvas.setZoom(this.value);
  canvas.setWidth(canvas.width * this.value);
  canvas.setHeight(canvas.height * this.value);
})

$('#toPNG').click(function() {
  //export to png
  var image = new Image();
  image.src = canvas.toDataURL({
    format: 'png',
    multiplier: 1
  });
  $('#png').html(image);
})

$('#toSVG').click(function() {
  //export to svg
  var svg = canvas.toSVG();
  $('#svg').html(svg);
})