JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<canvas id="c" width="400" height="400">
</canvas>
<input type="button" value="zoom minus" onclick="zoom(-0.1)" />
<input type="button" value="zoom plus" onclick="zoom(0.1)"/>

CSS

#c {
    border: 1px solid black;
}

JavaScript

var canvasZoom = 1;
var w = 400;
var h = 400;
zoom = function(val) {
  canvasZoom += val;
    canvas.setWidth(400 * canvasZoom);
    canvas.setHeight(400 * canvasZoom);
    canvas.setZoom(canvasZoom);
    //canvas.renderAll();
}

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

var textAsset = new fabric.IText('Hello World', {
                fontFamily: 'Arial',
                fontSize: 50,
                lockUniScaling: true,
                textAlign: 'left',
                originX: 'center',
                originY: 'center',
                centeredRotation: true,
                centeredScaling: true,
                top: 40,
                left: 140,
                shadow: { color: 'rgba(0,0,0,0.3)', offsetX: 10, offsetY: 20, blur: 9 }
            });
var rect = new fabric.Rect({width: 30, height: 30, top: 5, left: 5, fill: 'red'});
canvas.add(rect);
canvas.add(textAsset);
canvas.renderAll();