function applyPredictionsToImage()

in src/js/app.js [189:239]

• 37 lines of code
• 3 McCabe index (conditional complexity)

function applyPredictionsToImage() {

  let threshold = (thresholdSlider.value / 100);
  let width = imgTarget.width;
  let height = imgTarget.height;

  // Create the trace canvas to draw on image
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;

  const ctx = canvas.getContext('2d');
  ctx.drawImage(originalImage, 0, 0, width, height);
  ctx.lineWidth = 2;
  ctx.font = "15px Arial";

  ctx.beginPath();
  let x1, x2, y1, y2;
  let labelText, classVal, confidence, color;
  for (let i = 0; i < predictions.length; i++) {
    if (predictions[i][1] > threshold) {

      classVal = predictions[i][0];
      color = colorArray[predictions[i][0]];

      // Set color as per class label index of colorArray and 
      ctx.strokeStyle = color;

      // Get X/Y points from prediction.
      x1 = predictions[i][2] * width;
      y1 = predictions[i][3] * height;
      x2 = (predictions[i][4] * width) - x1;
      y2 = (predictions[i][5] * height) - y1;

      // Draw the box for detections.
      ctx.rect(x1, y1, x2, y2);
      ctx.stroke();

      // Draw the label and confidence as text
      confidence = `${Math.round(predictions[i][1] * 10000) / 100} %`;
      labelText = `ID:${i + 1}-${getPredictionLabel(classVal)} - ${confidence}`;

      ctx.fillStyle = color;
      ctx.fillText(labelText, x1, y1 - 2);

    }
  }

  let url = canvas.toDataURL();
  imgTarget.src = url;
}