You can do that using SVG.
Example:
<?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg">
<foreignobject x="120" y="120" width="180" height="180">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
Something
</div>
</body>
</foreignobject>
</svg>
Or after what you have:
<canvas id="canvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
document.getElementById('a').innerHTML +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }
Hope this helps you. Taken from Mozilla Docs
