how to turn touch-based user input into a perimeter polygon (concave hull) on mobile

Question

i want to let the user (old people) use his finger (or a big "pen") to highlight parts of a photo.

so i need to turn some quick, rough and thick, finger-based highlighting doodle (on a canvas) into a simplified perimeter polygon (concave hull polygon).

it should run on a mobile phone client, and every 500ms should send the hull coordinates to the server for querying a database.

i looked into the polygon npm package, which has a UNION function for joining two polygons (which might work with the circle-shaped curser turned into a polygon). but the package runs on the server and not on the client.

another packages i looked into are the turf nom (very big).

another option is this script that finds the polygon perimeter of multiple points. but i can t figure out how to adapt it in order to work with circles:

Find polygon perimeter of points quickly in Javascript

also, i feel that because i m iteratively creating the shape with touch events, there gotta be a better way, more iterative and interwoven with the 'touchmove' event call. with touch-input, there should be a cleverer, more iterative way of finding the perimeter hull-coordinates of the user-input.

any thoughts?

current way of painting (very basic):

'touchstart' and 'touchmove' events draw circles on the canvas and add the points to an array (pointsArray).

function drawPoint(pointX,pointY,radius) {
    ctx.beginPath();
    ctx.arc(pointX,pointY,radius,0,Math.PI*2,true);
    ctx.fill();
    ctx.closePath();
}

c.addEventListener('touchstart', function(e) {

    var px = e.touches[0].clientX - e.target.offsetLeft;
    var py = e.touches[0].clientY - e.target.offsetTop;

    drawPoint(px, py, paintRadius);     
    pointsArray.push({x:px, y:py});

}, false);


c.addEventListener('touchmove', function(e) { 

    // pretty much like touchstart
    // every 500 ms, find the perimeter of all points
    // and query the database

}