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=512 height=512 ></canvas>
<a id="lnkDownload" href="#">Save image</a>
<!-- <div width=600 height=600 style="height:600px;width:600px;"></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 = "#828282"
        ctx.rect((canvas.width / 2) - 110, 80, 220, 400);
        ctx.setLineDash([5, 4]);
        ctx.stroke();
        ctx.closePath();
    }
}

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

//frame image, should be displayed fully.
canvas.setOverlayImage('https://www.crewsportswear.com/t/shadow.v3/FRONT_ALL.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); */

var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);

function saveImage(e) {
    this.href = canvas.toDataURL({
        format: 'png',
        quality: 0.8
    });
    this.download = 'canvas.png'
}