基于Kairos API在图像中绘制矩形

Question

使用Kairos API检测图像后如何绘制矩形？我可以使用哪个库来执行此操作？这是一个数据示例：

{
  "attributes": {
      "age": 34,
      "asian": 0.00006,
      "black": 0.99929,
      "gender": {
          "femaleConfidence": 0.00001,
          "maleConfidence": 0.99999,
          "type": "M"
      },
      "glasses": "Eye",
      "hispanic": 0.00026,
      "lips": "Apart",
      "other": 0.00038,
      "white": 0
  },
  "chinTipX": 321,
  "chinTipY": 511,
  "confidence": 0.99939,
  "eyeDistance": 153,
  "face_id": 1,
  "height": 320,
  "leftEyeCenterX": 400,
  "leftEyeCenterY": 233,
  "pitch": -13,
  "quality": 0.66958,
  "rightEyeCenterX": 247,
  "rightEyeCenterY": 232,
  "roll": 0,
  "topLeftX": 157,
  "topLeftY": 151,
  "width": 320,
  "yaw": -5
}

我尝试使用Canvas根据“TopLeftX”，“TopLeftY”，“With”和“Height”的信息绘制它，但矩形与脸部的位置不对。这是矩形绘图的代码：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(TopLeftX,TopLeftY,With,Height);
ctx.stroke();

请帮忙。非常感谢你