JSFiddle - React, Tailwind, and code Playground

by franknstayn

HTML

<!-- <script src="https://raw.githubusercontent.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js" ></script -->
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
<!-- <canvas id="canvas" width=620 height=620 style="height:600px;width:600px;"></canvas> -->

<!-- <div width=600 height=600 style="height:600px;width:600px;"></div> -->

<div style="height: auto;">
	<div style="width: 620px; height: 620px; margin: 0px auto; transform: scale(1);">
		<!-- <img src="https://assets0.printio.ru/assets/products/classic_tee/large-front/white-1fabbbaeb21a05844e14dcf78192660f18568d7cc6403e74912e08e846dac8eb.png" style="position:absolute;top:0;left:50%;transform:translate(-50%)"> -->
    <object data="https://www.crewsportswear.com/t/front.svg" type="image/svg+xml" style="position: absolute;">
      <p>
      not supported
      </p>
    </object>
		<div class="canvas-container" style="width: 600px; height: 600px; position: fixed; user-select: none;">
			<!-- <canvas id="c" width="600" height="600" class="lower-canvas" style="position: absolute; width: 600px; height: 600px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
			<canvas class="upper-canvas " width="600" height="600" style="position: absolute; width: 600px; height: 600px; left: 0px; top: 0px; touch-action: manipulation; user-select: none; cursor: default;"></canvas> -->
      <canvas id="canvas" width=620 height=620 style="height:600px;width:600px;"></canvas>
		</div>
	</div>
</div>

CSS

#canvas {
  border: 1px solid red;
}

JavaScript

var img02URL = 'https://i.pinimg.com/564x/37/9c/a7/379ca7bd691f07a907e4ce2b9a464afc.jpg';
var opts = {
    clipTo: function (ctx){
        ctx.beginPath();
        ctx.lineWidth = "1";
        ctx.strokeStyle = "#6699ff"
        ctx.rect((canvas.width / 2) - 111, 94.833, 222, 380);
        ctx.setLineDash([5, 4]);
        ctx.stroke();
        ctx.closePath();
    }
}

var canvas = new fabric.Canvas('canvas', opts);
initCenteringGuidelines(canvas);
initAligningGuidelines(canvas);

//frame image, should be displayed fully.
canvas.setOverlayImage('https://www.crewsportswear.com/t/jersey-front-shadow.png', 		   canvas.renderAll.bind(canvas), {
        width: canvas.width,
        height: canvas.height 
});

canvas.selection = false;
canvas.controlsAboveOverlay = true;

fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: '#6699ff',
    borderColor: '#6699ff',
    cornerSize: 16,
    cornerStyle: 'circle',
});

//the image that should stay inside the frame
fabric.Image.fromURL(img02URL, function(oImg) {
    oImg.scale(0.25);
    canvas.centerObject(oImg);
    canvas.add(oImg);
    canvas.renderAll();
});

var rect2 = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'green',
  originX:'center',
  originY:'center',
  left:canvas.width/2,
  top:canvas.height/2,
});
canvas.add(rect2);