So I see that there are some new (ish) functions being proposed; toDataURLHD, toBlobHD, getImageDataHD, etc. which "returns [data] at the native canvas bitmap resolution" (.html).

But I don't understand the terminology. Does that mean that there are situations where the non-HD versions will rescale the image data before returning it? (i.e. on a high-resolution display could toDataURL produce an image which is lower quality than the actual canvas), or is this just referring to the pixels-per-inch metadata in the image?

I've been experimenting with as many scaling methods as I can think of (fiddle: /) and it always seems to be pixel-for-pixel, but that's hardly conclusive and I don't have access to any high-resolution displays to test on.

All I'm looking for is: can I rely on toDataURL & Co. producing pixel-for-pixel copies of my canvas, which have width and height exactly equal to the attributes set on the element? (and if so, what's the point of the HD versions?)

So I see that there are some new (ish) functions being proposed; toDataURLHD, toBlobHD, getImageDataHD, etc. which "returns [data] at the native canvas bitmap resolution" (http://developers.whatwg/the-canvas-element.html).

But I don't understand the terminology. Does that mean that there are situations where the non-HD versions will rescale the image data before returning it? (i.e. on a high-resolution display could toDataURL produce an image which is lower quality than the actual canvas), or is this just referring to the pixels-per-inch metadata in the image?

I've been experimenting with as many scaling methods as I can think of (fiddle: http://jsfiddle/SktKQ/) and it always seems to be pixel-for-pixel, but that's hardly conclusive and I don't have access to any high-resolution displays to test on.

All I'm looking for is: can I rely on toDataURL & Co. producing pixel-for-pixel copies of my canvas, which have width and height exactly equal to the attributes set on the element? (and if so, what's the point of the HD versions?)

• javascript
• html5-canvas

1 Answer 1

WhatWG documents on canvas say the following:

The size of the coordinate space does not necessarily represent the size of the actual bitmaps that the user agent will use internally or during rendering. On high-definition displays, for instance, the user agent may internally use bitmaps with two device pixels per unit in the coordinate space, so that the rendering remains at high quality throughout. Anti-aliasing can similarly be implemented using over-sampling with bitmaps of a higher resolution than the final image on the display.

And

The toDataURL() method returns the data at a resolution of 96dpi. The toDataURLHD() method returns it at the native canvas bitmap resolution.

How I understand this is that the toDataURL just returns CSS pixels (at 96 DPI); but the implementation is free to use higher pixel density that would be only visible through toDataURLHD. That is, even if you define your canvas as 800x600, being a CSS pixel size, an implementation could actually use 192 DPI density (1600x1200); if you use the former, you get 800x600, whereas the HD method would get you the actual pixels, guaranteed.

Furthermore the following is stated:

Thus, in the 2D context, calling the drawImage() method to render the output of the toDataURLHD() method to the canvas, given the appropriate dimensions, has no visible effect.

However it is not guaranteed that using the image data from toDataURL would not have a visible effect (being of worse resolution).