mimic.js
// Draw the detected facial feature points on the image
Draw the detected facial feature points on the image
Draw the detected facial feature points on the image
function drawFeaturePoints(canvas, img, face) {
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.strokeStyle = 'blue';
  for (var id in face.featurePoints) {
    var featurePoint = face.featurePoints[id];
    ctx.beginPath();
    ctx.arc(featurePoint.x, featurePoint.y, 3, 0, 2 * Math.PI, false);
    ctx.stroke();
  }
}
function drawFeaturePoints ( canvas , img , face ) { var ctx = canvas . getContext ( '2d' ) ; ctx . fillStyle = 'blue' ; ctx . strokeStyle = 'blue' ; for ( var id in face . featurePoints ) { var featurePoint = face . featurePoints [ id ] ; ctx . beginPath ( ) ; ctx . arc ( featurePoint . x , featurePoint . y , 3 , 0 , 2 * Math . PI , false ) ; ctx . stroke ( ) ; } }
Draw the detected facial feature points on the image
Draw the detected facial feature points on the image
// Obtain a 2D context object to draw on the canvas // Set the stroke and/or fill style you want for each feature point marker // See: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Fill_and_stroke_styles // Loop over each feature point in the face // Draw feature point, e.g. as a circle using ctx.arc() // See: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc // void ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);