Canvas não renderiza HTML, só "imagens". Existem algumas bibliotecas que podem tentar converter o HTML em imagens, tal como html2canvas.
Entretanto, você pode criar um Web Component para ter "uma página em uma tag".
No exemplo abaixo, você pode ver três tecnologias trabalhando em conjunto:
- Templates: define um trecho de HTML para ser reusado
- Custom Elements: registra uma nova tag (elemento) e a forma como ele será renderizado
- Shadow DOM: isola a árvore de elementos e os estilos que estão dentro de um elemento, no caso, o nosso componente
document.registerElement('super-componente', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var template = document.querySelector('#super-componente');
console.log(template);
var clone = document.importNode(template.content, true);
this.createShadowRoot().appendChild(clone);
}
}
})
});
<template id="super-componente">
<style>
* { color: red }
</style>
<div>
<content></content>
</div>
</template>
<h1>Minha página</h1>
<super-componente>
<h2>Título 1</h2>
<p>conteúdo 1</p>
</super-componente>
<super-componente>
<h2>Título 2</h2>
<p>conteúdo 2</p>
</super-componente>
Você pode inclusive deixar o componente em outro arquivo HTML e importá-lo em outras páginas assim:
<link rel="import" href="super-componente.html">
Veja outro exemplo mais complexo de um componente web que criei por esses dias num arquivo separado:
<template id="mmd-preview-template">
<style>
@import url("<?php echo plugin_dir_url(__FILE__); ?>css/editor-preview.css");
<?php if (file_exists(wp_get_theme()->get_template_directory() . '/mmd-preview-editor.css')) { ?>
@import url("<?php echo wp_get_theme()->get_template_directory_uri(); ?>/mmd-preview-editor.css");
<?php } ?>
</style>
<div class='mmd-preview-content prettyprint'></div>
</template>
<?php if (file_exists(wp_get_theme()->get_template_directory() . '/mmd-preview-editor.js')) { ?>
<script type="text/java" src=""<?php echo wp_get_theme()->get_template_directory_uri(); ?>/mmd-preview-editor.js""></script>
<?php } ?>
<script>
var mmd_template = document.currentScript.ownerDocument.querySelector('#mmd-preview-template');
var mmdPreview = document.registerElement('mmd-preview', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var root = this.createShadowRoot();
var clone = document.importNode(mmd_template.content, true);
root.appendChild(clone);
}
},
content: {
value: function() {
return this.shadowRoot.querySelector('.mmd-preview-content').innerHTML;
}
},
update: {
value: function(content) {
this.shadowRoot.querySelector('.mmd-preview-content').innerHTML = content;
this.dispatchEvent(new CustomEvent('previewComponentUpdated', { detail: {
'element': this.shadowRoot.querySelector('.mmd-preview-content'),
'content': content
}}));
var changedElement = this.shadowRoot.querySelector('.mmd-changed');
if (changedElement) {
this.dispatchEvent(new CustomEvent('previewComponentElementChanged', { detail: {
'element': changedElement
}}));
}
}
}
})
});
</script>