JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<canvas width="700" height="650" style="z-index:1;position:relative">
</canvas>

<img id="image">

JavaScript

var canvas1 = $('canvas').get(0);
var ctx = canvas1.getContext('2d');

/* Face detection box before, this should be replaced by output from face-api.js */
var box_x = 113;
var box_y = 154.82;
var box_width = 240;
var box_height = 289.18;

/* Crop the profile image based on face api positions */
var image = new Image();

image.src = 'https://appairbrush.com/wp-content/uploads/2020/09/EN-POST15-SEPT-25-9A.jpeg';
var image_width = image.width;
var image_height = image.height;
image.onload = function () {

  ctx.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));

  /* Face positions after crop (depending on crop dimensions) */
  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)};

  /* Aura colors */
  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, face_top.y - face_top.x / 3, face_center_top.x, face_center_top.y);

    /* Draw right path */
    ctx.moveTo(box_width * 2 + (box_width / 1.5), box_width * 3);
    ctx.bezierCurveTo(face_bottom.x * 2 +...