JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css">
<!-- 
source and downloadable demo at:
https://github.com/zembaalbert/jquery-polygon-annotation-on-images
-->

<div id="annotation"></div>

JavaScript

$.fn.annotation = function(options) {
	// some globals used all over... TODO: use params instead
    var annotations    = [];
    var annIdxEditing  = -1;  //idx in array "annotations" or -1 if no annotation is being edited
	var hiddenInputId  = $('#' + options.hiddenInputId);
	var annotationDiv  = $(this);
	var isDialogOpen   = false;
	
    preventSelectionOnDbClick(annotationDiv);

    var img = $('<img>');
    img.attr('src', options.image);
    img.css('position', 'absolute');
    preventSelectionOnDbClick(img);
    img.appendTo(this);
    
    var canvas = $('<canvas id="annotation-canvas">');
    canvas.css('position', 'absolute');
    canvas.appendTo(this);
    
    img.load(function() {
        canvas.attr('width', this.width);
        canvas.attr('height', this.height);
        canvas.css('width', this.width + 'px');
        canvas.css('height', this.height + 'px');
        annotationDiv.css('height', this.height + 'px');
		
		if (options.annotationsJSON) {
			annotations = JSON.parse(options.annotationsJSON);
			renderAnnotations(canvas, annotations);
		}
    });

    canvas.qtip({ 
        content: {
            text: ''
        },
        position: {
            target: 'mouse', 
            adjust: {x: 5,y: 5} 
        },
        style: {
            classes: 'qtip-annotation'
        }
    });
    $('.qtip-annotation').hide();
    
	if (options.editable) {
		canvas.click(function(e) {
			if (annIdxEditing == -1) {
				annIdxEditing = annotations.length;
				annotations[annIdxEditing] = {
					path: [],
					text: ''
				};
			}
			
			var p = getMousePosOnCanvas($(this), e);
			annotations[annIdxEditing].path.push(p);
			annotations[annIdxEditing].path.push(p); // last item is always mouse position
			renderAnnotations($(this), annotations);
		});
		
		canvas.dblclick(function(e) {
			if (annIdxEditing != -1) {
				var p = getMousePosOnCanvas($(this),...