使用pdf.js在画布上无法正确显示文本

Question

我正在尝试在多个画布上显示pdf页面，但是渲染时文本无法正确显示。

我搜索了同样的问题。但是它们都不能解决我的问题。

这里是一个例子：

这是另一个：

  

JS代码

 <script>
    console.log("hi")
    pdfjsLib.getDocument("{{ object.pdf.url }}").then(doc => {
        pdfFile = doc
        for (var i = 1; i <= 4; i++) {
            var canvas = document.getElementById('canvas' + i);
            var context = canvas.getContext('2d');
            context.font="25px Verdana";

            pdfjsLib.disableStream = true;
            openPage(doc, i, context);
        }
    })

    function openPage(pdfFile, pageNumber, context) {
        var scale = 5;
        pdfFile.getPage(pageNumber).then(function (page) {
            viewport = page.getViewport(scale);
            // reference canvas via context
            var canvas = context.canvas;
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            canvas.style.width = "100%";
            canvas.style.height = "100%";
            var renderContext = {
                canvasContext: context
                , viewport: viewport
            };
            page.render(renderContext);
        });
    }

</script>

  

pdf.js

 <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>

  

html代码

   <canvas id="canvas1" width="700" height="300"></canvas>
   <canvas id="canvas2" width="500" height="300"></canvas>
   <canvas id="canvas3" width="500" height="300"></canvas>
   <canvas id="canvas4" width="500" height="300"></canvas>