Draw

Draw Methods

Human library includes built-in Canvas draw methods

• human.draw.options
  currenntly set draw options, can be overriden in each method
  used to set line/text colors, line width, font type, label templates, etc.
• human.draw.canvas
  simply input (video, canvas, image, etc.) to output canvas
  as it was after processing (see filters)
• human.draw.all
  meta function that executes draw for face, hand, body, object, gestures for all detected features
• human.draw.person
  meta function that executes draw for face, hand, body, object, gestures for all detected features beloning to a specific person
• human.draw.[face|hand|body|object|gestures]
  draws points, boxes, polygones and labels for each detected feature as defined in draw.options

Labels

If options.drawLabels is enabled (default):

• Labels for each feature are parsed using templates
• Label templates can use built-in values in [] or be provided as any string literal
• Labels for each feature are set relative to the top-left of the detection box of that feature (face, hand, body, object, etc.)
• Draw methods automatically handle multi-line labels and vertical spacing
• Built-in unmatched label templates not matched are removed

Default Label Templates

drawOptions = {
  faceLabels: `face
    confidence: [score]%
    [gender] [genderScore]%
    age: [age] years
    distance: [distance]cm
    real: [real]%
    live: [live]%
    [emotions]
    roll: [roll]° yaw:[yaw]° pitch:[pitch]°
    gaze: [gaze]°`,
  bodyLabels: 'body [score]%',
  bodyPartLabels: '[label] [score]%',
  objectLabels: '[label] [score]%',
  handLabels: '[label] [score]%',
  fingerLabels: '[label]',
  gestureLabels: '[where] [who]: [what]',
};

Example

Example of custom labels:

const drawOptions = {
  bodyLabels: `person confidence is [score]% and has ${human.result?.body?.[0]?.keypoints.length || 'no'} keypoints`,
};
human.draw.all(dom.canvas, human.result, drawOptions);