JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<div class="painting-area">
  <canvas id="canvas-front" width="680" height="680"></canvas>
 </div>

CSS

[hidden] {
    display: none!important;
}
.painting-area{
    overflow: hidden;
    margin: 0;
    height: auto;
    border: 1px solid #e0e0e0;
}

JavaScript

var canvas = new fabric.Canvas('canvas-front', {
					preserveObjectStacking: true,
					controlsAboveOverlay: true
				});
				
				
				
canvas.backgroundColor = '#ebeced';

window.fabric.Image.fromURL('https://evolveapothecary.com/frontnew.jpg', (img) => {
img.set({
left: 0,
top: 0
});
img.filters = [new fabric.Image.filters.Brightness({ brightness: 0.5 })];
img.applyFilters();
img.scaleToHeight(680);
img.scaleToWidth(680);
canvas.add(img);
})

window.fabric.Image.fromURL('https://evolveapothecary.com/frontnew.jpg', (img) => {
img.set({
left: 0,
top: 0
});
img.scaleToHeight(680);
img.scaleToWidth(680);
canvas.add(img);
})


canvas.renderAll();


					canvas.isDrawingMode = true;
					canvas.freeDrawingBrush.color = '#000';
					canvas.freeDrawingBrush.width = 20;