HTML-in-Canvas 업데이트: 더 나은 Web API를 향한 반복

// 이전 구현 (Chrome < 150)
const level = 0;
const internalFormat = gl.RGBA;
const srcFormat = gl.RGBA;
const destType = gl.UNSIGNED_BYTE;

gl.texElementImage2D(
  gl.TEXTURE_2D,
  level,
  internalFormat,
  srcFormat,
  destType,
  element
);

// 새 구현 (Chrome 150부터)
const internalFormat = gl.RGBA8;
gl.texElementImage2D(gl.TEXTURE_2D, internalFormat, element);

// 이전 구현 (Chrome < 150)
GPUQueue.copyElementImageToTexture(
  element,
  width,
  height,
  { texture: texture }
);

// 새 구현 (Chrome 150부터)
const sourceDict = { source: element };
const destDict = {
  destination: { texture: texture },
  width: width,
  height: height
};

GPUQueue.copyElementImageToTexture(sourceDict, destDict);

// 이전 (Chrome 150)
const sourceDict = {
  source: myElement,
  sx: 0,
  sy: 0,
  swidth: 100,
  sheight: 100
};
const destDict = {
  destination: { texture: myTexture },
  width: 300,
  height: 200
};

queue.copyElementImageToTexture(sourceDict, destDict);

// 이후 (Chrome 155+)
const sourceDict = {
  source: myElement,
  sourceX: 0,
  sourceY: 0,
  sourceWidth: 100,
  sourceHeight: 100
};
const destDict = {
  texture: myTexture,
  size: { width: 300, height: 200 }
};

queue.drawElementImageToTexture(sourceDict, destDict);

// 1. 요소의 자연스러운 레이아웃 크기 캡처
const elementImage = canvas.captureElementImage(element);

// 2. 텍스처 백킹을 한 번 (또는 요소 크기 변경 시) 사전 할당
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(
  gl.TEXTURE_2D,
  0,
  gl.RGBA8,
  Math.ceil(elementImage.width),
  Math.ceil(elementImage.height),
  0,
  gl.RGBA,
  gl.UNSIGNED_BYTE,
  null // null은 픽셀 업로드를 건너뛰고 VRAM을 예약합니다
);

// 3. 사전 할당된 VRAM에 DOM 업로드
gl.texElementSubImage2D(
  gl.TEXTURE_2D,
  0,                  // level
  0,                  // xoffset
  0,                  // yoffset
  element             // DOM 요소 전달
);

<!-- 이전 -->
<canvas layoutsubtree>
  <div id="badge">
    <h2>Player Stats</h2>
    <button id="actionBtn">Equip</button>
  </div>
</canvas>

<!-- 이후 (Chrome 155+) -->
<canvas content="drawable">
  <!-- 하위 트리 A (본문 및 제목) -->
  <div id="badge" drawable>
    <h2>Player Stats</h2>
    <!-- 하위 트리 B (하위 트리 A에서 제외됨; 독립적으로 그려지고 애니메이션됨) -->
    <button id="actionBtn" drawable>Equip</button>
  </div>
</canvas>

// 이전
const transform = ctx.drawElementImage(element, x, y);
element.style.transform = transform.toString();

// 이후 (Chrome 155+)
ctx.drawElementImage(element, x, y);
// 스타일 업데이트 불필요: 위치 및 히트 테스트 자동 동기화

canvas.addEventListener('paint', () => {
  // 1. 요소 스냅샷 GPU 텍스처에 업로드
  device.queue.drawElementImageToTexture({ source: element }, { texture });

  // 2. 3D 씬 렌더링...
  drawScene();

  // 3. 필요한 대로 변환 행렬 구성
  const canvasTransform = new DOMMatrix().translate(x, y);

  // 4. DOM 히트 테스트 및 접근성 경계 상자 업데이트
  canvas.updateElementGeometry(element, { canvasTransform });
});

// ============================================================================
//  버전 간 캔버스 마크업
// ============================================================================
if (!canvas.hasAttribute('content') && !canvas.hasAttribute('layoutsubtree')) {
  if ('content' in HTMLCanvasElement.prototype) {
    // Chrome 155+ (새로운 표준화된 속성)
    canvas.setAttribute('content', 'drawable');
  } else {
    // Chrome < 155 (레거시 부울 속성)
    canvas.setAttribute('layoutsubtree', '');
  }
}

// ============================================================================
// 버전 간 2D 그리기 및 동기화
// ============================================================================
function draw2DElement(ctx, element, x, y) {
  // 2D 그리기 호출 실행
  const result = ctx.drawElementImage(element, x, y);

  if (result !== undefined && typeof result?.toString === 'function') {
    // Chrome < 155: drawElementImage가 DOMMatrix를 반환했습니다.
    // DOM 히트 테스트 경계를 정렬하기 위해 수동 변환 파이핑이 필요합니다.
    element.style.transform = result.toString();
  } else {
    // Chrome 155+: drawElementImage가 void/undefined를 반환합니다.
    // 브라우저가 DOM 위치, 클릭 및 접근성 경계 상자를 자동으로 정렬합니다!
    // 이전에 여기에 element.style.transform 로직이 있었다면, 지우십시오.
    if (element.style.transform) {
      element.style.transform = "";
    }
  }
}

// ============================================================================
// WebGPU 버전 간 지원
// ============================================================================
if ('drawElementImageToTexture' in GPUQueue.prototype) {
  // Chrome 155+ (최신 구현)
  queue.drawElementImageToTexture(
    { source: element, sourceX: 0, sourceY: 0, sourceWidth: w, sourceHeight: h },
    { texture: myTexture, size: { width: w, height: h } }
  );
} else if (typeof queue.copyElementImageToTexture === "function") {
  // Chrome 150 - 154: 먼저 Chrome 150+ 사전 객체 시그니처를 시도한 다음,
  // Chrome < 150 시그니처로 대체합니다.
  try {
    queue.copyElementImageToTexture(
      { source: element },
      { destination: { texture: myTexture }, width: w, height: h }
    );
  } catch (err) {
    // Chrome < 150
    queue.copyElementImageToTexture(element, { texture: myTexture });
  }
}

// ============================================================================
// WebGL 버전 간 지원
// ============================================================================
if ('texElementSubImage2D' in WebGL2RenderingContext.prototype) {
  // Chrome 155+ (명시적 사전 할당 + 부분 이미지)
  gl.texElementSubImage2D(gl.TEXTURE_2D, 0, 0, 0, element);
} else if (gl.texElementImage2D && gl.texElementImage2D.length === 3) {
  // Chrome 150-154 (3개 인수 시그니처)
  gl.texElementImage2D(gl.TEXTURE_2D, gl.RGBA8, element);
} else if (gl.texElementImage2D) {
  // Chrome < 150 (6개 인수 시그니처)
  gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, element);
}