Editorial: clarify canvas coordinate system #2867
Conversation
source
Outdated
|
|
||
| <pre><canvas width=200 height=200 style=width:100px;width:100px></pre> | ||
|
|
||
| <p>This represents a 200x200 canvas (using 200x200 <span data-x="'px'">CSS pixels</span> as unit |
There was a problem hiding this comment.
I think it should be clarified that 200x200 represents both: a) the domain of the canvas's coordinate space in CSS pixels, and b) the size of the canvas's bitmap in actual pixels.
source
Outdated
| <p>This represents a 200x200 canvas (using 200x200 <span data-x="'px'">CSS pixels</span> as unit | ||
| for ease of integration with CSS), rendered as 100x100 <span data-x="'px'">CSS pixels</span>. As | ||
| stated above this could be backed by 200x200 device pixels, meaning that each pixel on the canvas | ||
| is backed by a single device pixel.</p> |
There was a problem hiding this comment.
It is not clear to me what you are trying to explain in this sentence. By "device pixels" are you referring to the pixels of the canvas's bitmap or the pixels of the physical display device? Whichever it is, this sentence doesn't really provide any actionable information (because of the word "could").
There was a problem hiding this comment.
Referring to the physical device. It was meant as a statement of fact to affirm the details.
There was a problem hiding this comment.
Then perhaps you should state what conditions need to be met in order to get 1 to 1 correspondence with physical device pixels. Something about the layout vs intrinsic size matching the devicePixelRatio.
|
I removed the last sentence and reworded the earlier one you commented on. I think it would still be nice to clarify the relationship between output bitmap / layout / actual device further, but it's a little hard for me to come up with the right terminology that makes it clear. |
|
I agree. Perhaps we could say something like this: If the intrinsic size of the canvas element is equal to the layout size of the canvas element (e.g. if the width and height style properties are set to 'auto', which is the default), then a CSS pixel in the rendering context's coordinate space is equal in size to a CSS pixel in the canvas element's layout coordinate space. Otherwise, the canvas element's content is resized to fit, using the algorithm specified by the 'content-fit' CSS property. |
|
That covers two out of three (which I actually hoped would be clear from the example I added), but doesn't cover physical device pixels. |
|
The ratio between CSS pixels and physical device pixels is given by window.devicePixelRatio, we could just refer to that: https://drafts.csswg.org/cssom-view/#dom-window-devicepixelratio |
|
What's the plan here? |
|
I'm not sure. Let me push up some rewording. I don't really like referencing devicePixelRatio since that also drags zooming into the equation which makes it even more complicated. Maybe we should just leave device pixels out of it. |
source
Outdated
| <div class="example"> | ||
| <p>Using <span data-x="'px'">CSS pixels</span> to describe the size of a rendering context's | ||
| <span>output bitmap</span> does not mean that when rendered an equivalent number of <span | ||
| data-x="'px'">CSS pixels</span> ends up being used. <span data-x="'px'">CSS pixels</span> are |
There was a problem hiding this comment.
Suggestion:
(...) does not mean that when rendered the canvas will cover an equivalent area in <span data-x="'px'">CSS pixels</span>.
|
Addressed the nit. @domenic could you land? |
|
Changing commit message per https://github.com/whatwg/meta/blob/master/TEAM.md
|
Fixes #2854.