вырезать фрагменты видео не распознанные как объект

Я нахожу и выделяю контуры лица:

let video = document.getElementById("video");
let model;
// declare a canvas variable and get its context
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
var br = document.getElementById("ourBR");


const setupCamera = () => {
  navigator.mediaDevices
    .getUserMedia({
      video: { width: 600, height: 400 },
      audio: false,
    })
    .then((stream) => {
      video.srcObject = stream;
      setTimeout(setBR, 2000);
    });
};

const detectFaces = async () => {
  const prediction = await model.estimateFaces(video, false);

  // draw the video first
  ctx.drawImage(video, 0, 0, 600, 400);

  prediction.forEach((pred) => {
    
    // draw the rectangle enclosing the face
    ctx.beginPath();
    ctx.lineWidth = "1";
    ctx.strokeStyle = "yellow";
    // the last two arguments are width and height
    // since blazeface returned only the coordinates, 
    // we can find the width and height by subtracting them.
    ctx.rect(
      pred.topLeft[0],
      pred.topLeft[1],
      pred.bottomRight[0] - pred.topLeft[0],
      pred.bottomRight[1] - pred.topLeft[1]
    );
    ctx.stroke();

    // drawing small rectangles for the face landmarks
    ctx.fillStyle = "red";
    pred.landmarks.forEach((landmark) => {
      ctx.fillRect(landmark[0], landmark[1], 5, 5);
    
    });
    
  });
};

setupCamera();
video.addEventListener("loadeddata", async () => {
  model = await blazeface.load();
  // call detect faces every 100 milliseconds or 10 times every second
  setInterval(detectFaces, 100);
});

Мне нужно сделать фокус только на лице человека, а остальное обрезать. допустим на изображении распозналось лицо:

А нужно вывести дальше то, что внутри рамки:

Если по примеру: drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) выставляю соответсвенно: drawImage(video, pred.topLeft[0],pred.topLeft[0], 60, 40, 0, 0, 600, 400) то ничего не меняется.