问如何增加画布位深度以在javaScript中创建更高质量的图片？以及如何在输出时增加画布的大小。

EN

首先，当您将图像绘制到画布上时，它还不是png，它是一个简单的原始位图，在画布API中工作，您称之为它的方法，然后将其转换为png，以便浏览器显示它，这就是使用toDataURL时得到的结果。在使用toDataURL时，您可以选择希望输出的图像格式，我认为jpeg和bmp与png一起支持。(不要把它看作是转换成另一种格式的png，因为它不是)

我不知道你说的更高的质量是什么意思，你可以看到32位就足够让所有的RGBA通道都有一个真正的颜色8位深度给你比人眼一次能看到的更多的颜色。我知道，取决于用户对你的图片的曝光和角度，他对颜色的感知可能会有所不同，但不是它的质量，我会说，这仅仅取决于它的分辨率。无论如何，画布的设计并不是为了处理那些更深层次的颜色，老实说，在画布上可以渲染的任何场景中，都不需要大量的颜色信息，这只适用于大制片厂制作的高清晰度电影和游戏，而且，即使你可以在画布上使用深浅的颜色，它也将真正依赖于用户的录像机和屏幕的支持，我认为大多数人都没有这种支持。

如果您希望向每个像素的颜色添加不直接相关的信息，但是可能在标记转换时，它们可以让您更好地创建您自己的类型，能够携带画布API可以接受的imageData，保持它的32位格式，以及相应数组上的附加信息。

是的，输出图像具有与画布相同的分辨率，但是有几种方法可以帮助您调整最终构图的大小。就像Simon Sarris说的那样，创建一个屏幕外画布，其中的分辨率是您想要的图像的最终分辨率，那么，您可以：

1. 通过调用drawImage来调整光栅图像的大小，同时利用调整大小的参数提供toDataURL生成的图像
2. 如Simon所说，在那里重新绘制场景，这将减少质量损失，如果您的构图包含通过画布API创建的形状，而不仅仅是图像文件放在一起的话。

如果您事先知道最终的分辨率，那么只需将画布的宽度和高度设置为它，但是CSS的宽度和高度可以不同的设置，以便您的画布适合您的网页。

如果要使用getImageData或toDataURL创建更大的映像，则必须：

1. 创建一个比普通画布更大的内存中画布。
2. 把你的整个场景重新画到你记忆中的画布上。您可能希望调用内存中的上下文中的ctx.scale(theScale, theScale)来扩展映像，但这在很大程度上取决于它们最初是如何创建的(图像？帆布路径？)
3. 在内存中的画布上调用getImageData或toDataURL，而不是普通的画布。

记忆中的画布是指：

var inMem = document.createElement('canvas');
// The larger size
inMem.width = blah;
inMem.height = blah;