Как получить изображение canvas'а после применения стилей (transform)?

Проблема в том, что хоть стили и применяются, я не могу получить нужные данные с zoom'ом и смещением, которые могу видеть на canvas'е.

const video = videoRef.current!;
const v = video;
const w = canvas.width;
const h = canvas.height;

try {
  // ctx!.fillRect(0, 0, w, h);
  ctx!.filter = `blur(${mainStore.settings.privacyModeBlurRadius}px)`;
  ctx!.drawImage(v, 0, 0, w, h);

  if (allVideoMap[videoId!]) { // Тут я применяю стили
    canvas!.style.transform = 'translate(' + (allVideoMap[videoId!].zoomData!.zoomPosX) + 'px,' + (allVideoMap[videoId!].zoomData!.zoomPosY) + 'px) scale(' + allVideoMap[videoId!].zoomData!.zoom + ',' + allVideoMap[videoId!].zoomData!.zoom + ')';
  } else if (allVideoMap[userVideostreamId!]) {
    canvas!.style.transform = 'translate(' + (allVideoMap[userVideostreamId!].zoomData!.zoomPosX) + 'px,' + (allVideoMap[userVideostreamId!].zoomData!.zoomPosY) + 'px) scale(' + allVideoMap[userVideostreamId!].zoomData!.zoom + ',' + allVideoMap[userVideostreamId!].zoomData!.zoom + ')';
  }

  const frame = ctx!.getImageData(0, 0, w, h); // Не смотря на примененные стили я получаю полное изначальное изображение
  ctx!.putImageData(frame, 0, 0);

Ответы (0 шт):