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>

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 = 'https://herhealth.nl/wp-content/uploads/2018/06/photo-1521227889351-bf6f5b2e4e37-768x614.jpeg';
image.onload = function() {
  var image_width = this.width;
  var image_height = this.height;
  img.drawImage(image,
              box_x - box_width, box_y - box_width / 1.75,
              (box_width * 3), (box_width * 3),
              0, 0,
              (box_width * 3), (box_width * 3));            
  
  img.beginPath();
	img.strokeStyle = "yellow";
  img.lineWidth = 2;
  img.moveTo(box_x, box_y);
  img.lineTo(box_x + 2, box_y + 2 );
  
  img.moveTo(box_x + box_width, box_y + box_height);
  img.lineTo(box_x + box_width + 2 , box_y + box_height + 2);
  
  img.moveTo(box_x, box_y);
  img.lineTo(box_x , box_y);
  
  img.stroke();
}

var face_bottom = { x: box_width, y: box_width * 3 - box_width};
var face_top = { x: box_width, y: box_width * 0.5};
var face_center_top = {x: box_width + (box_width / 2), y: box_width - (box_width * 0.8)};
var fill_color_inner = "#1F32AD";

var fill_color_outer = "#FFA06B";

function drawInnerAura(face_bottom, face_top, face_center_top, box_width, box_height, fill_color) {
	
  /* Some offset otherwise stroke is on the face */
	var face_top_offset = 0.1;
  var face_middle_offset = 0.9;
  var face_bottom_offset = 0.1;

	ctx.beginPath();
  
  /* Draw left path */
	ctx.moveTo(box_width - (box_width / 1.5), box_width * 3);
	ctx.bezierCurveTo(face_bottom.x - face_bottom.x * face_bottom_offset, face_bottom.y, face_bottom.x - face_bottom.x * face_middle_offset, face_bottom.y - box_height / 2, face_top.x - face_top.x * face_top_offset, face_top.y);
	ctx.bezierCurveTo(face_top.x - face_top.x * face_top_offset, face_top.y, face_top.x + face_top.x / 4,...