draw(facedetector = this) {
         
         const detections = facedetector.app.detections || null;
         const options = facedetector.app.options || null;
         const canvas = facedetector.app.canvas || null;

        // Clear the canva so that it doesn't accumulate drawing at every detection
        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

        // Draw the Detections for face detect
        if (options && options.detection) {
            faceapi.draw.drawDetections(canvas, detections);
        }


        // Draw face in line of different colors for even and odd indices
        if (options && (options.landmarks || options.puppeteer)) {

            // for each detection get the landmarks from the api and draw them as a full line
            detections.forEach((result, i) => {
                const landmark = result.landmarks;
                const drawPuppeteer = new faceapi.draw.DrawFaceLandmarks(landmark, {
                    drawLines: true,
                    drawPoints: false,
                    lineWidth: 2,
                    lineColor: i % 2 == 1 ? 'rgba(0,0,0,1)' : 'rgba(255,0,0, 1)',
                    pointSize: 2,
                    pointColor: 'rgba(0,0,0,1)'
                });
                drawPuppeteer.draw(canvas);
            });
        }


        // Custom Draw Gender, Age and Expressions
        if (options && (options.age || options.gender || options.expression)) {
            detections.forEach((result, i) => {

                // Get the most probable expression
                var sorted = result.expressions ? result.expressions.asSortedArray() : null;
                var expression = Array.isArray(sorted) ? sorted.filter(function(expr) {
                    return expr.probability > 0.9;
                }) : null;
                var expressionToDisplay = Array.isArray(expression) ? expression[0] ? expression[0].expression : 'neutral' : 'neutral';

                // Compose the array of results to display on the canva
                var resultToDisplay = [];
                if (options && options.expression) {
                    resultToDisplay.push("Expression: " + expressionToDisplay);
                }
                if (options && options.gender) {
                    resultToDisplay.push("Gender: " + result.gender);
                }
                if (options && options.age) {
                    resultToDisplay.push("Age: " + Math.round(result.age));
                }

                // Draw the values at the bottom of the canva
                const box = result.detection.box;
                const anchor = box.bottomLeft;
                const drawTextField = new faceapi.draw.DrawTextField(resultToDisplay, anchor);
                drawTextField.draw(canvas);

            });
        }
    }
/* 
     * Method that draws different renderings of the detections on the canvas
     * 
     * @facedetector: FaceDetector object
     * - detections: face objects detected from the stream
     * - options: Optional. Object defining the different options applied to the rendering
     * - canvas: Optional. The canvas on which the drawings will be rendered
     *
     */
Method that draws different renderings of the detections on the canvas

@facedetector: FaceDetector object
- detections: face objects detected from the stream
- options: Optional. Object defining the different options applied to the rendering
- canvas: Optional. The canvas on which the drawings will be rendered
Method that draws different renderings of the detections on the canvas @facedetector : FaceDetector object - detections : face objects detected from the stream - options : Optional . Object defining the different options applied to the rendering - canvas : Optional . The canvas on which the drawings will be rendered
draw(facedetector = this) {
         const detections = facedetector.app.detections || null;
         const options = facedetector.app.options || null;
         const canvas = facedetector.app.canvas || null;
        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
        if (options && options.detection) {
            faceapi.draw.drawDetections(canvas, detections);
        }
        if (options && (options.landmarks || options.puppeteer)) {
            detections.forEach((result, i) => {
                const landmark = result.landmarks;
                const drawPuppeteer = new faceapi.draw.DrawFaceLandmarks(landmark, {
                    drawLines: true,
                    drawPoints: false,
                    lineWidth: 2,
                    lineColor: i % 2 == 1 ? 'rgba(0,0,0,1)' : 'rgba(255,0,0, 1)',
                    pointSize: 2,
                    pointColor: 'rgba(0,0,0,1)'
                });
                drawPuppeteer.draw(canvas);
            });
        }
        if (options && (options.age || options.gender || options.expression)) {
            detections.forEach((result, i) => {
                var sorted = result.expressions ? result.expressions.asSortedArray() : null;
                var expression = Array.isArray(sorted) ? sorted.filter(function(expr) {
                    return expr.probability > 0.9;
                }) : null;
                var expressionToDisplay = Array.isArray(expression) ? expression[0] ? expression[0].expression : 'neutral' : 'neutral';
                var resultToDisplay = [];
                if (options && options.expression) {
                    resultToDisplay.push("Expression: " + expressionToDisplay);
                }
                if (options && options.gender) {
                    resultToDisplay.push("Gender: " + result.gender);
                }
                if (options && options.age) {
                    resultToDisplay.push("Age: " + Math.round(result.age));
                }
                const box = result.detection.box;
                const anchor = box.bottomLeft;
                const drawTextField = new faceapi.draw.DrawTextField(resultToDisplay, anchor);
                drawTextField.draw(canvas);
            });
        }
    }
draw ( facedetector = this ) { const detections = facedetector . app . detections || null ; const options = facedetector . app . options || null ; const canvas = facedetector . app . canvas || null ; canvas . getContext ( '2d' ) . clearRect ( 0 , 0 , canvas . width , canvas . height ) ; if ( options && options . detection ) { faceapi . draw . drawDetections ( canvas , detections ) ; } if ( options && ( options . landmarks || options . puppeteer ) ) { detections . forEach ( ( result , i ) => { const landmark = result . landmarks ; const drawPuppeteer = new faceapi . draw . DrawFaceLandmarks ( landmark , { drawLines : true , drawPoints : false , lineWidth : 2 , lineColor : i % 2 == 1 ? 'rgba(0,0,0,1)' : 'rgba(255,0,0, 1)' , pointSize : 2 , pointColor : 'rgba(0,0,0,1)' } ) ; drawPuppeteer . draw ( canvas ) ; } ) ; } if ( options && ( options . age || options . gender || options . expression ) ) { detections . forEach ( ( result , i ) => { var sorted = result . expressions ? result . expressions . asSortedArray ( ) : null ; var expression = Array . isArray ( sorted ) ? sorted . filter ( function ( expr ) { return expr . probability > 0.9 ; } ) : null ; var expressionToDisplay = Array . isArray ( expression ) ? expression [ 0 ] ? expression [ 0 ] . expression : 'neutral' : 'neutral' ; var resultToDisplay = [ ] ; if ( options && options . expression ) { resultToDisplay . push ( "Expression: " + expressionToDisplay ) ; } if ( options && options . gender ) { resultToDisplay . push ( "Gender: " + result . gender ) ; } if ( options && options . age ) { resultToDisplay . push ( "Age: " + Math . round ( result . age ) ) ; } const box = result . detection . box ; const anchor = box . bottomLeft ; const drawTextField = new faceapi . draw . DrawTextField ( resultToDisplay , anchor ) ; drawTextField . draw ( canvas ) ; } ) ; } }
Method that draws different renderings of the detections on the canvas
Method that draws different renderings of the detections on the canvas
// Clear the canva so that it doesn't accumulate drawing at every detection // Draw the Detections for face detect // Draw face in line of different colors for even and odd indices // for each detection get the landmarks from the api and draw them as a full line // Custom Draw Gender, Age and Expressions // Get the most probable expression // Compose the array of results to display on the canva // Draw the values at the bottom of the canva