Discussion:
Canvas toDataURL and device dpi resolution
John Knottenbelt
2011-12-01 16:52:14 UTC
Permalink
How should the data url returned by toDataURL be sized in the case of
a high device dpi resolution system? E.g. where the canvas's backing
store horizontal and vertical dimensions are some multiple of the
specified width and height in CSS pixels.

The test Loading Image....primarycolours.html
makes a drawing with canvas, saves this drawing to a data url, loads
the data url into an Image element and then draws that back to the
canvas, and then performs some assertions that the image is as
expected.

I've been trying this out in the DumpRenderTree test runner of WebKit,
where toDataURL returns an image derived from the canvas' backing
store image data. If I set the device dpi scale to 2.0 to imitate a
high DPI display, the test will fail because the image returned by
toDataURL is now four times as big as the test expects it to be.

Is this correct behaviour, or is the test correct and I simply have a
bug in WebKit?

Many thanks

John
Edward O'Connor
2011-12-01 19:44:52 UTC
Permalink
Post by John Knottenbelt
How should the data url returned by toDataURL be sized in the case of
a high device dpi resolution system? E.g. where the canvas's backing
store horizontal and vertical dimensions are some multiple of the
specified width and height in CSS pixels.
In the case of getImageData(), the spec says:

"[T]he data returned by getImageData() is at the resolution of the
canvas backing store. This is likely to not be one device pixel to each
CSS pixel if the display used is a high resolution display."

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation

I would expect toDataURL() to use the same underlying machinery as
getImageData() behind the scenes. This should definitely be clarified in
the spec.
Post by John Knottenbelt
Is this correct behaviour, or is the test correct and I simply have a
bug in WebKit?
I believe WebKit behaves correctly in this case.


Ted
John Knottenbelt
2011-12-02 11:49:56 UTC
Permalink
Thanks for your advice. I have submitted :-
- https://www.w3.org/Bugs/Public/show_bug.cgi?id=15041 to request the
spec be clarified in this regard.
- https://www.w3.org/Bugs/Public/show_bug.cgi?id=15042 to request the
test to be updated to cope with higher resolution backing stores.

Should I cc anyone on these bugs?

John
Post by Edward O'Connor
Post by John Knottenbelt
How should the data url returned by toDataURL be sized in the case of
a high device dpi resolution system? E.g. where the canvas's backing
store horizontal and vertical dimensions are some multiple of the
specified width and height in CSS pixels.
"[T]he data returned by getImageData() is at the resolution of the
canvas backing store. This is likely to not be one device pixel to each
CSS pixel if the display used is a high resolution display."
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation
I would expect toDataURL() to use the same underlying machinery as
getImageData() behind the scenes. This should definitely be clarified in
the spec.
Post by John Knottenbelt
Is this correct behaviour, or is the test correct and I simply have a
bug in WebKit?
I believe WebKit behaves correctly in this case.
Ted
Loading...