JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<canvas width="324px" height="324px" style="z-index:1;position:relative" id="person">
  </canvas>
<div class="aura">
  <canvas width="324px" height="324px" style="z-index:1;position:relative" id="aura">
  </canvas>
</div>

<img id="image">

CSS

.aura {
  position: absolute;
  top: 10px;
  left: 10px;
}

JavaScript

var ctx = $('#aura').get(0).getContext('2d');
var img = $('#person').get(0).getContext('2d');

/* Face detection box before, this should be replaced by output from face-api.js */
var box_x = 294;
var box_y = 184;
var box_width = 108.32;
var box_height = 152.18;

var image = new Image();
image.src =...