JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<canvas id="c"></canvas>

JavaScript

//create a wrapper around native canvas element (with id="c")
var canvas = new fabric.StaticCanvas('c');

//set canvas height and width
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);

//create image
var img = document.createElement("img");

//set image source
img.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAGQAgMAAABpG7XoAAAABGdBTUEAALGPC/xhBQAAAAxQTFRF/Jg42CgA////iHAA2W6FYwAAAU1JREFUeNrt3LFNw0AUBuCDiIaGKkswBSNQEApGYAmmQQJTMEKYhyoDAI7EIeWE83J3ERX+/s5n39c+2ff80vvwO8+rwxmCvKThz6yBxWKxWKx/aT2ujssti8VisVisJut1nOQt7bLIS/nislK3WSwWi8Vildb6+6nNdEuKrDKnLBaLxWKx+q1p3f5JeIPFYrFYLFbFyvlIQRZjkK89dZvFYrFYLFbUZ/WU2nNe6dlisVgsFosVnv3mFqqHaZVu62lmsVgsFosVvSOH1mde6nnfZrFYLBaLFX1jHsO/hcIdLBaLxWKx9lhlLsrynJeWBXKTl8qCvgm/VLNYLBaLxYpy0jQL46rpbJjFYrFYLFaZs+7pU9csFovFYrEqVmXe4/3hoct3PbOVWSwWi8WasbXuaF0+omeLxWKxWKwZW2HXVIdV7dlisVgsFmu+1hZ+ScFmRJGAiAAAAABJRU5ErkJggg==";

//add image
var imgInstance = new fabric.Image(img, {
left: img.width/2,
top: img.height/2
});
canvas.add(imgInstance);

//set canvas size to equal image size
canvas.setHeight(img.height);
canvas.setWidth(img.width);

canvas.on('mouse:down', function(options) {
  console.log(options.e.clientX, options.e.clientY);
});