html5 - 以更高的分辨率保存html5 Canvas 图像

我正在创建一个允许用户使用HTML5和canvas元素创建场景的站点。
我打算用KinecticJS来做这个，看起来很棒。但我有一个问题，我真的很挣扎。
因为我想给用户一个更高质量的场景打印版本，我不能只给他们800x600像素的画布数据，因为当你打印时，它变得非常模糊。
我看过一些论坛建议简单地“放大”您的canvas，然后节省输出，但我担心这会带来性能成本。尽管这可能是我唯一的希望。
由于KinecticJS使用一个图形层次来渲染场景，我认为可以使用KinecticJS创建一个场景，然后重新渲染（而不是缩放）同一个场景，只是这次可以放大位置等。。。在场景中的所有对象中。
以前有人做过这样的事吗？到目前为止，我还处于研究阶段。
有一点需要注意，显然我知道SVG，但我需要更大的浏览器支持，IE在IE9之前使用VML，我严重怀疑我能否将SVG/VML场景转换为PNG并保持浏览器支持。

最佳答案

你可以为一个“捕捉帧”放大画布
有一个绘制函数或渲染函数。给它一个论据，如果这个论据是真的，那么把它放到一个更大的上下文中。

var canvas, context; //you already have these
var newCanvas, newContext; //I'm making these
var scaleFactor = 2; //How much we scale?
var ctx; //Identify's which context to draw to....

function render(screenShot){
    ctx = context;
    if(screenShot){
        if(!newCanvas){
            newCanvas = document.createCanvas();
            newContext = newCanvas.getContext('2d');
        }
        newCanvas.width = canvas.width * scaleFactor;
        newCanvas.height = canvas.height * scaleFactor;

        ctx = newContext;
        newContext.scale(scaleFactor, scaleFactor); //Now all your previous drawing will autoscale
    }

    /*   all your old draw code goes here,
    change all your context calls to ctx */

    if(screenShot){
        YourNewHighResSuperCoolSnapShotData = newCanvas.toDataURL("image/png");
    }
}

你可能想看看toDataURL是如何工作的，它会给你什么。
这不会造成损失，因为您只需要在需要高质量渲染时调用render（true）