어떻게 든 html 요소를 캔버스에 렌더링 할 이미지로 가져올 수 있습니까?

Question

정말 무작위로 묻는 질문처럼 보일지 모르지만 캔버스에 문자가 올바르게 배치 된 텍스트를 얻으려면 해킹을 찾으려합니다.

Google에서 많은 검색을 한 후에 실제로 이렇게 할 방법이없는 것처럼 보입니다. 내가 시도한 첫 번째 일은 문자열에서 각 문자를 렌더링하고, 측정하고, 오프셋에 추가하고, 문자 간격을 추가하는 것이었지만 그 결과는 매우 형편 없었다. 아마도 문자 쌍 공간 등에 관한 글꼴 파일에 포함 된 정보 때문일 것입니다.

완벽한 결과를 얻으려면 HTML 요소에 텍스트를 렌더링하고 CSS를 통해 문자 간격을 설정 한 다음 어떻게 든 캡처해야합니다. 요소를 이미지로 만듭니다. 나는 그런 일을 할 수있는 방법을 아는 사람이 있습니까?

Answer 1

왜 HTML 요소를 캔버스 위로 이동하지 않는 것이 좋을까요?

<canvas style="background-color:cyan; left:100px; right:100px; width:100px; height:100px; position:absolute" > 
</canvas> 
<p style="left:120px; right:100px; position:absolute; z-index:100; ">this is a test</p>