Javascript 用于pdf文件的雷达图高分辨率画布

下面给出了使用chart.js显示雷达图的代码。当我在屏幕上以PDF格式显示时，它看起来很模糊。我一直在尝试在Chrome上使用webkitBackingStorePixelRatio和devicePixelRatio进行缩放，但我有点卡住了

--HTML--

--Javascript--

var ctx1=document.getElementById（“myChart”）；
var myRadarChart1=新图表（ctx1{
类型：“雷达”，
数据：{
标签：{{competenceCleTitle | json | U encode | raw}}，
数据集：[
{
背景颜色：#F79646“，
边框颜色：“f59c1a”，
pointBackgroundColor:#f59c1a“，
pointBorderColor:#fff“，
pointHoverBackgroundColor:#fff“，
pointHoverBorderColor:#f59c1a“，
点半径：0，
数据：{{competencycleniveau | json | u encode | raw}}
}
]
},
选项：{
图例：{
显示：假
},
回答：是的，
比例：{
反面：错，
滴答声：{
显示：假，
马克斯：8，
步长：1，
贝吉纳泽罗：是的，
最多：5
}
}
}
});

仅供参考，如何以pdf格式显示？请点击以下链接：

<div class="chart">
    <canvas id="myChart"></canvas>
</div>

<script>

        var ctx1 = document.getElementById("myChart");

        var myRadarChart1 = new Chart(ctx1, {
            type: 'radar',
            data: {
                labels: {{ competenceCleTitle|json_encode|raw }},
                datasets: [
                    {
                        backgroundColor: "#F79646",
                        borderColor: "#f59c1a",
                        pointBackgroundColor: "#f59c1a",
                        pointBorderColor: "#fff",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: "#f59c1a",
                        pointRadius: 0,
                        data: {{ competenceCleNiveau|json_encode|raw }}
                    }
                ]
            },
            options: {
                legend: {
                    display: false
                },
                responsive: true,
                scale: {
                    reverse: false,
                    ticks: {
                        display: false,
                        maxTicksLimit: 8,
                        stepSize: 1,
                        beginAtZero: true,
                        max: 5
                    }
                }
            }
        });
</script>