JSFiddle - React, Tailwind, and code Playground

by guillermo_matterport

HTML

<script src="//cdn.bootcss.com/fabric.js/1.6.0-rc.1/fabric.js"></script>
<body>
    <div id="canvasContainer">
    <canvas id="canvas" width="300" height="300"></canvas>
    </div>

    <script src="lib/fabric.js"></script>
    <script>
        var canvas = new fabric.Canvas('canvas');

        var rect = new fabric.Rect({
            top : 100,
            left : 100,
            width : 100,
            height : 100,
            fill : 'red'
        });
        var dot = new fabric.Circle({
            top: 100,
            left: 100,
            originX: 'center',
            originY: 'center',
            radius: 4
        })

        canvas.add(rect);
        canvas.add(dot);
        
        zoomCenter = new fabric.Point(dot.left, dot.top)
        canvas.zoomToPoint(zoomCenter, 2)
        canvas.setViewportTransform([2, 0, 0, 2, -50, -50])  // this does center around the dot
    </script>

CSS

#canvasContainer {
	background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4v///yH5BAAHAP8ALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==);
	display: inline-block;
	border: 2px solid #ccc;
}