JSFiddle - React, Tailwind, and code Playground

by ocanal

HTML

<div style="float:left">
            <canvas id="jPolygon" width="100" height="100" style="cursor:crosshair" data-imgsrc="" onmousedown="point_it(event)" oncontextmenu="return false;">
                Your browser does not support the HTML5 canvas tag.
            </canvas>
        </div>
        <div style="float:left; margin-left:20px;">
            <div id="myresult" class="img-zoom-result"></div>
            <div>
                <button onclick="undo()">Undo</button>
                <button onclick="clear_canvas()">Clear</button>
                <input type="file" id="files" name="files[]" multiple />
                <p>Press <strong>Left Click</strong> to draw a point.</p>
                <p><strong>CTRL+Click</strong> or <strong>Right Click</strong> to close the polygon.</p>
            </div>
            <div>
                <p><strong>Coordinates:</strong></p>
                <textarea id="coordinates" disabled="disabled" style="width:300px; height:200px;"></textarea>
            </div>
            <div>
                <p>Go to <a href="http://www.matteomattei.com/projects/jpolygon">project website</a> - <a href="https://github.com/matteomattei/jPolygon">source code</a></p>
            </div>
        </div>

CSS

* {
  box-sizing: border-box;
}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*set the size of the lens:*/
  width: 40px;
  height: 40px;
  pointer-events: none;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 300px;
  height: 300px;
  position: relative;
}

.img-zoom-result:before {
  content: ' ';
  height: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: red;
}

.img-zoom-result:after {
  content: ' ';
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: red;
}

JavaScript

function imageZoom(imgID, resultID) {
              var img, lens, result, cx, cy, pos;
              img = document.getElementById(imgID);
              result = document.getElementById(resultID);
              /* Create lens: */
              lens = document.getElementById('lens');
              if (!lens) {
                  lens = document.createElement("DIV");
                  lens.setAttribute("class", "img-zoom-lens");
                  lens.id = 'lens';
                  /* Insert lens: */
                  img.parentElement.insertBefore(lens, img);
              }
              /* Calculate the ratio between result DIV and lens: */
              cx = result.offsetWidth / lens.offsetWidth;
              cy = result.offsetHeight / lens.offsetHeight;
              /* Set background properties for the result DIV */
              result.style.backgroundImage = "url('" + img.getAttribute('data-imgsrc') + "')";
              result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
              /* Execute a function when someone moves the cursor over the image, or the lens: */
              lens.addEventListener("mousemove", moveLens);
              img.addEventListener("mousemove", moveLens);
              /* And also for touch screens: */
              lens.addEventListener("touchmove", moveLens);
              img.addEventListener("touchmove", moveLens);

              function moveLens(e) {
                var x, y;
                /* Prevent any other actions that may occur when moving over the image */
                //e.preventDefault();
                /* Get the cursor's x and y positions: */
                pos = getCursorPos(e);
                /* Calculate the position of the lens: */
                x = pos.x - (lens.offsetWidth / 2);
                y = pos.y - (lens.offsetHeight / 2);
                /* Prevent the lens from being positioned outside the image: */
                if (x > img.width - lens.offsetWidth) {x...