Javascript 高分辨率HTML5画布截图

我一直在尝试拍摄一个HTML5画布元素的高分辨率屏幕截图，该元素由矩形和圆形组成。

canvas.toDataURL（）

非常有效，但生成的图像仅限于原始画布的大小。我真正想要的是拍摄一个屏幕截图，它是原始画布的4到5倍

然而，我的策略是在屏幕外创建一个临时画布，如下所示：

function renderScreenshot(canvas, scaleFactor) {
    var ctx = canvas.getContext('2d');
    var screenshotCanvas = document.createElement('canvas'); 
    var screenshotCtx = screenshotCanvas.getContext('2d');
    screenshotCanvas.width = canvas.width * scaleFactor; 
    screenshotCanvas.height = canvas.height * scaleFactor;
    screenshotCtx.drawImage(canvas, 0, 0, canvas.width * scaleFactor, canvas.height * scaleFactor);
    return screenshotCanvas.toDataURL();
}

---

现在的问题是，缩放后的图像模糊且像素化，对我没有任何好处。这是怎么回事

不幸的是，虽然您可以像在矢量图像中一样绘制路径，但一旦绘制路径，它们就会变成光栅化的，并且无法在没有插值的情况下进行缩放

---

相反，您需要完全重新绘制所有内容，将所有坐标乘以比例因子，以正确渲染路径元素。

这是正确的，请参阅此线程以获取如何缩小图像比例的示例：