セキュリティ上の理由から簡単ではありませんが、HTML など DOM の内容を canvas に描画することができます。この記事は Robert O'Callahan によるブログ記事をもとに、セキュアに、安全に、そして仕様に準拠したかたちでそれを実現する方法を紹介します。 概要 HTML をそのまま canvas に描画することはできません。その代わりに、描画したい内容を含む SVG 画像を利用します。描画したい HTML を含む <foreignObject> を作り、その SVG 画像を canvas に描画するのです。 描画へのステップ 唯一厄介なのが、SVG を作ることです。SVG のための XML を含んだ文字列を作り、次のものを含んだ Blob を生成することです。 "image/svg+xml" という Blob の MIME タイプ <svg> 要素 svg 要素内の <
![DOM オブジェクトを Canvas に描画する - HTML: HyperText Markup Language | MDN](https://cdn-ak-scissors.b.st-hatena.com/image/square/e51bd6dc33a667d35eb4146698a198e55ff92d6e/height=288;version=1;width=512/https%3A%2F%2Fdeveloper.mozilla.org%2Fstatic%2Fimg%2Fopengraph-logo.72382e605ce3.png)