HTML5的canvas元素上的子像素消除锯齿的文本

我有点困惑的方式canvas元素反混淆文本，希望你们都可以帮助。

在下面的截图中，顶部的“Quick brown Fox”是一个H1元素，底部的是一个canvas元素，文本呈现在它上面。在底部，您可以看到两个“F”并排放置和放大。注意H1元素与背景更好地混合：

这里是我用来渲染画布文本的代码：

var canvas = document.getElementById('canvas');
        if (canvas.getContext){

            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'black';
            ctx.font = '26px Arial';
            ctx.fillText('Quick brown Fox',26);
        }

是否可以在canvas上渲染文本，使其看起来与H1元素完全相同？为什么他们不同？

解决方法

回答自己的问题：

可以使用本网站上展示的技术：

https://bel.fi/alankila/lcd/

唯一的问题是它太慢，无法在生产应用程序中实现。如果有人跑得更快，请让我知道。