clmdraw

CLM Trackr has a built in draw method. This module exposes the ability to draw face parts individually using a custom strokestyle

Usage no npm install needed!

<script type="module">
  import clmdraw from 'https://cdn.skypack.dev/clmdraw';
</script>

README

clmdraw

Example

 // pointsFromCLM are points that were detected by clm of a persons face
 // canvas is a HTMLCanvasElement
 // last property is a colour you'd like to draw with
 clmdraw.draw( pointsFromCLM, canvas, '#OOCAFE' );
 clmdraw.drawLeftEye( pointsFromCLM, canvas, '#FF00FF' );

Members

clmdraw.draw( clmPositions, canvas, [strokeStyle, doClear ] )

Draw is equivalent to the draw built into clm (draw the entire face) with the exceptions of drawing in a forehead which can be calculated using the module clmutils and having the ability to define a stroke style. When drawing if the forehead points don't exist then they wont be drawn.

Params

  • clmPositions Array - The points returned from clm for the detected face
  • canvas HTMLCanvasElement - The canvas which you want to draw the clm face on
  • [strokeStyle] String - How thick and what colour you'd like to draw your lines default is the strokestyle defined by the canvas
  • [doClear] Boolean - Should the canvas context be cleared before draw default is true

clmdraw.drawForehead( clmPositions, canvas, [strokeStyle, doClear ] )

This method will draw just the forehead points if they exist to the supplied canvas

Params

  • clmPositions Array - The points returned from clm for the detected face
  • canvas HTMLCanvasElement - The canvas which you want to draw the clm face feature on
  • [strokeStyle] String - How thick and what colour you'd like to draw your lines default is the strokestyle defined by the canvas
  • [doClear] Boolean - Should the canvas context be cleared before draw default is true

clmdraw.drawJaw( clmPositions, canvas, [strokeStyle, doClear ] )

This method will draw just the jaw points to the supplied canvas

Params

  • clmPositions Array - The points returned from clm for the detected face
  • canvas HTMLCanvasElement - The canvas which you want to draw the clm face feature on
  • [strokeStyle] String - How thick and what colour you'd like to draw your lines default is the strokestyle defined by the canvas
  • [doClear] Boolean - Should the canvas context be cleared before draw default is true

clmdraw.drawLeftEye( clmPositions, canvas, [strokeStyle, doClear ] )

This method will draw just the left eye points to the supplied canvas

Params

  • clmPositions Array - The points returned from clm for the detected face
  • canvas HTMLCanvasElement - The canvas which you want to draw the clm face feature on
  • [strokeStyle] String - How thick and what colour you'd like to draw your lines default is the strokestyle defined by the canvas
  • [doClear] Boolean - Should the canvas context be cleared before draw default is true

clmdraw.drawLeftEyeBrow( clmPositions, canvas, [strokeStyle, doClear ] )

This method will draw just the left eyebrow points to the supplied canvas

Params

  • clmPositions Array - The points returned from clm for the detected face
  • canvas HTMLCanvasElement - The canvas which you want to draw the clm face feature on
  • [strokeStyle] String - How thick and what colour you'd like to draw your lines default is the strokestyle defined by the canvas
  • [doClear] Boolean - Should the canvas context be cleared before draw default is true

clmdraw.drawLips( clmPositions, canvas, [strokeStyle, doClear ] )

This method will draw just the lip points to the supplied canvas

Params

  • clmPositions Array - The points returned from clm for the detected face
  • canvas HTMLCanvasElement - The canvas which you want to draw the clm face feature on
  • [strokeStyle] String - How thick and what colour you'd like to draw your lines default is the strokestyle defined by the canvas
  • [doClear] Boolean - Should the canvas context be cleared before draw default is true

clmdraw.drawNose( clmPositions, canvas, [strokeStyle, doClear ] )

This method will draw just the nose points to the supplied canvas

Params

  • clmPositions Array - The points returned from clm for the detected face
  • canvas HTMLCanvasElement - The canvas which you want to draw the clm face feature on
  • [strokeStyle] String - How thick and what colour you'd like to draw your lines default is the strokestyle defined by the canvas
  • [doClear] Boolean - Should the canvas context be cleared before draw default is true

clmdraw.drawRightEye( clmPositions, canvas, [strokeStyle, doClear ] )

This method will draw just the right eye points to the supplied canvas

Params

  • clmPositions Array - The points returned from clm for the detected face
  • canvas HTMLCanvasElement - The canvas which you want to draw the clm face feature on
  • [strokeStyle] String - How thick and what colour you'd like to draw your lines default is the strokestyle defined by the canvas
  • [doClear] Boolean - Should the canvas context be cleared before draw default is true

clmdraw.drawRightEyeBrow( clmPositions, canvas, [strokeStyle, doClear ] )

This method will draw just the right eyebrow points to the supplied canvas

Params

  • clmPositions Array - The points returned from clm for the detected face
  • canvas HTMLCanvasElement - The canvas which you want to draw the clm face feature on
  • [strokeStyle] String - How thick and what colour you'd like to draw your lines default is the strokestyle defined by the canvas
  • [doClear] Boolean - Should the canvas context be cleared before draw default is true