Javascript 以高分辨率呈现html画布图像

我希望创建一个系统，用户可以在浏览器上（借助paper.js或processing.js等）在画布上创建图像，并能够打印出他们在画布上创建的图像的大尺寸（理想情况下可达300dpi）

显然，在用户浏览器中直接从画布元素导出图像，我仅限于屏幕大小和分辨率等

因此，我研究了当用户以更大的尺寸保存和捕获图像数据时，瞬间放大画布元素的解决方案。这可能是一个解决方案，但我敢肯定，文件大小在较大的情况下会很快失控

---

我没有经常使用Node.js，但我想知道有经验的人是否知道Node是否可以实现这一点，它是否是一个更好的解决方案，以及我将如何实现这一点？

我看到两种方法可以实现您想要的：

• 使用超大的画布，可以通过css进行缩放。
  例如，您可以有一个1000X1000画布，它显示在一个200pxX200px的较小视图中

  <canvas          width=1000   height=1000
          style = 'width:200px; height:200px;'     id='cv'>  
  </canvas>
  

  我很快尝试了这两种解决方案，我很惊讶地发现css解决方案非常慢（在Ch和FF中），而且复制一个背景画布似乎比让css来做要快。 也许这取决于一些质量设置，但解决方案2似乎更灵活、更快
  第一个css版本在这里（移动鼠标绘制10X10矩形）：
  第二个背面画布+复制版本在此（移动鼠标绘制10X10矩形）：

  ---

  这可能会为这个主题提供一些信息：因此，我研究了当用户以较大的尺寸保存和捕获图像数据时，瞬间放大画布元素的解决方案。-你的确切意思是什么？非常感谢你的回答！当然有帮助。谢谢！我走了第二条路，但是图像的旋转有问题，速度很慢。你有什么想法吗？（我又问了一个问题）无论如何，谢谢你分享你的知识；）浏览器应该在打印时直接将画布图形调用转换为PostScript矢量图形。

  // formula to get the css scale :
  var cssScaleX = canvas.width / canvas.offsetWidth;  
  var cssScaleY = canvas.height / canvas.offsetHeight;
  // then mouse coords are to be multiplied by the scale : 
  //                                       mouse.x *= cssScaleX;