JSFiddle - React, Tailwind, and code Playground

by handmade

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
<canvas id="c" width="2560" height="1600"></canvas>

CSS

canvas{
   width:640px !important;
   height:400px !important; 
   border:1px solid green;
}

JavaScript

var canvas  = new fabric.Canvas('c'),
    imageUrl = 'http://alexander.drts.com.au/api/v1/uploads/media/7c15827c6a4a6a350404dca6a22b8db219ce9f78.jpeg',
    canvasCenter = canvas.getCenter(),
    canvasCenterPoint = new fabric.Point(canvasCenter.left, canvasCenter.top),
    zoomValue = 0.5;

//load image
fabric.Image.fromURL(imageUrl, onImageLoad, {crossOrigin: 'anonymous'});

//zoom in 
canvas.zoomToPoint(canvasCenterPoint, zoomValue);


/// some details implementation below ///
function onImageLoad(image){
    image.set({
        left:100,
        top:100,
        originX: 'center',
        originY: 'center',
        cornerSize: 30,
        transparentCorners:false
    });
    canvas.add(image).setActiveObject(image); 
}