JSFiddle - React, Tailwind, and code Playground

by Mark Phillips

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container mt-5 pt-4">
  <div class="row">
    <!--Grid column-->
    <div class="col-md-8">   
      <a class="float-left" role="button" href="{{ previous_path }}" ><h5>&laquo; prev</h5></a>  
      <a class="float-right" href="{{ next_path }}" role="button"><h5>next &raquo;</h5></a>
      <div>
           <div id="locate_faces">
             <!--<img  src="{{ image_detail }}" class="top-center img-fluid" id='img1'>-->
             <img  src="https://natures-spa.com/wp-content/uploads/2017/09/biodynamic-facial-package-woman-in-lavender-field-blue-sky-700px-wide-lr.jpg" id='img1' class="top-center img-fluid" style="position:relative;z-index:10">
             <canvas id="overlay" width="100" height="100" class="top-center" style="z-index:9900;top:0;left:0;position:absolute"></canvas>
           </div>
      </div>
    </div>
    <div class="col-md-4" >
      <div class="list-group d-flex flex-row flex-wrap">

        <h5 class="list-group-item w-40 list-group-item-action border-0 p-2" >
        <span  onmouseover="mouse_over(12)" onmouseout="mouse_out(12)" class="badge badge-pill badge-primary">hover here</span></h5>
       
      </div>
    </div>
    
    
  </div>
</div>

JavaScript

var location_data_ready = false;
var image;
var contex; 

function mouse_over(tag_id) {
    if (location_data_ready) {
        addBox(tag_id);
    }
}

function mouse_out(tag_id) {
    if (location_data_ready) {
        removeBox(tag_id);
    }
}

function addBox(tag_id) { 
		// show the overlay
    context.fillStyle = "rgba(0, 0, 0, 0.6)";
    context.fillRect(0, 0, image.width, image.height);
    // put a hole in the oeverlay - method 1
    context.clearRect(50,50, 30,30); 
    // put another hole in the overlay - method 2
    context.fillStyle = "rgbs(0,0,0,0)";
    context.fillRect(200,200,30,30);
    // add somew text
    context.font = "30px Arial";
    context.fillStyle = "red";
		context.fillText("Hello World", 200, 235); 
    console.log("Finished adding the overlay with cutouts");
}

function removeBox(tag_id) {
    context.clearRect(0, 0, image.width, image.height);
    console.log("Finished removing the overlay")
}

$(document).ready(function(){
  console.log("Image width="+$( "#img1" ).width()+", height="+$( "#img1" ).height());
  // ajax code to get locations from the server - rmeoved for clarity on the issue
  // First, grab the face locations and scale_factor from the server
  scale_factor = 1;
  image = document.getElementById("img1");

  // now set up the canvas overlay
  position = $("#img1").position();
  canvas  = document.getElementById("overlay");
  context = canvas.getContext("2d");
  canvas.style.left = position.left + "px";
  canvas.style.top = position.top + "px";
  canvas.style.width = image.width + "px";
  canvas.style.height = image.height + "px";
  context.fillStyle = "rgba(0, 0, 0, 0)";

  location_data_ready = true;
});