JSFiddle - React, Tailwind, and code Playground

by Gisele Lima

HTML

<div class="wrapper">
    <canvas id="c1" width="1200" height="1200"></canvas>
</div>

CSS

.wrapper { border: 1px solid #404040; display: inline-block; }

JavaScript

function init() {
    var canvas =this.__canvas = new fabric.Canvas('c1',{hoverCursor: 'pointer',
	    selection: false});
    var urls=['https://dl.dropboxusercontent.com/s/ix6mvv49wnx226a/Central-Richmon_clipped_rev_1.png?dl=0' , 
			'https://dl.dropboxusercontent.com/s/jjp2l0kgdw8iitb/Laurel-Heights.png?dl=0',
			'https://dl.dropboxusercontent.com/s/wdk02w40z1466g5/LoneMountain.png?dl=0',
			'https://dl.dropboxusercontent.com/s/t6tnptndu2k22xr/OuterRichmond.png?dl=0',
			'https://dl.dropboxusercontent.com/s/tv4rhwjc0nw35iz/Presidio-Heights.png?dl=0'	,
			'https://dl.dropboxusercontent.com/s/ttbf390w2vdx4id/Inner-richmond.png?dl=0'];
	for (var i=0; i<urls.length; i++){
		fabric.Image.fromURL( urls[i], function(img){

			img.perPixelTargetFind = true;
		     img.targetFindTolerance = 4;
		      img.hasControls = img.hasBorders = false;
		      canvas.add(img);

		}, {
            crossOrigin: 'Anonymous'
        }); 
	}
    
    canvas.findTarget = (function (originalFn) {
        return function () {
            var target = originalFn.apply(this, arguments);
            if (target) {
                if (this._hoveredTarget !== target) {
                    canvas.fire('object:over', { target: target });
                    if (this._hoveredTarget) {
                        canvas.fire('object:out', { target: this._hoveredTarget });
                    }
                    this._hoveredTarget = target;
                }
            }
            else if (this._hoveredTarget) {
                canvas.fire('object:out', { target: this._hoveredTarget });
                this._hoveredTarget = null;
            }
            return target;
        };
    })(canvas.findTarget);
};


init();