Javascript 画布内的HTML文本

我需要呈现一个图像，我已经把一些HTML文本放在它上面，然后用户能够下载图像和文本作为图像，甚至更好的是作为pdf

certText元素取自一个TinyMCE变量，用户每次都在文本中使用不同的HTML标记

所以可能是这样

“你好用户，你好吗” 或 “您好，很高兴您获得了认证”

从我在下面代码中创建的图像选项开始，Canvas不翻译HTML标记。 我已经读到，使用Canvas是不可能呈现HTML标记的，但是有没有其他方法可以成功实现这一点。 该代码用于我制作的一个Laravel项目

var p = document.getElementById("certificate");
var ptx = p.getContext("2d");
var imgp = document.getElementById("certificateEmpty");
var txtp = document.getElementById("certText").innerHTML;
imgp.onload = function(){
ptx.drawImage(imgp, 0, 0);
ptx.font = "48px Nunito";
ptx.fillText(txtp, 150, 1000);
};
imgp.src = "{{$attendees[0]->certBLocation}}";

---

当你说“呈现html标签”时，你想达到什么目的？
您的意思是要为画布上绘制的文本设置样式吗？
如果是这样，您必须使用画布函数来设置文本的外观。
在下面使用代码的示例中，我使用“fillStyle”来设置绘制文本所用的图形填充颜色

var p=document.getElementById（“证书”）；
var ptx=p.getContext（“2d”）；
var imgp=document.getElementById（“certificateEmpty”）；
var txt=document.getElementById（“certText”）；
var txtp=txt.innerHTML；
imgp.onload=函数（）{
ptx.drawImage（imgp，0，0，p.宽度，p.高度）；
var styles=window.getComputedStyle（txt）；
ptx.fillStyle=styles.color；
//ptx.font=styles.font；//在firefox中似乎不起作用。
ptx.font=styles['font-weight']+“”+styles['font-size']+“”+styles.fontFamily；//由于连字符，访问属性数组样式。
ptx.fillText（txtp，01100）；
};
imgp.src=”https://www.gravatar.com/avatar/7b67c827ee1671ba3b43f4aebf6794fb?s=200";
img，画布{
宽度：200px；
高度：200px；
}
#证书文本{
颜色：#ff0000；
字体大小：粗体；
字体大小：40px；
}

一些文本
我在画布上绘制的文本上有粗体、斜体等，但从外部TML中我得到了带有html标记的文本。我需要应用于该样式的文本。请尝试更改ptx.font=“48px Nunito”；至ptx.font=“italic bold 48px Nunito”；但它并不总是相同的标记，这些标记是从一个TinyMCE字段中给出的，然后作为变量在画布创建中传递。这些信息可能是有问题的。使用getComputedStyle（）阅读样式，并将其转换为适合画布字体的字符串。我更新了答案