Skip to content

drawImage() with a density-corrected img: image pixels or CSS pixels? #13074

Open

Description

@zcorpan

drawImage() says:

If not specified, the dw and dh arguments must default to the values of sw and sh, interpreted such that one CSS pixel in the image is treated as one unit in the output bitmap's coordinate space. If the sx, sy, sw, and sh arguments are omitted, then they must default to 0, 0, the image's natural width in image pixels, and the image's natural height in image pixels, respectively.

For an img whose density isn't 1 (from srcset or EXIF resolution), image pixels and CSS pixels differ, and it's unclear which one the source rectangle uses or what size drawImage(img, 0, 0) draws at. My reading is that it draws at the density-corrected natural size (naturalWidth).

Browsers disagree. A 200×100 PNG drawn with drawImage(img, 0, 0):

img naturalWidth Chrome Canary Firefox Nightly Safari TP
srcset="a.png 400w" sizes="100px" 50 50px 200px 200px
srcset="a.png 2x" 100 200px 200px 200px

density-corrected-image-in-canvas.html seems to expect source rectangle coordinates to be density-corrected for EXIF resolution.

It'd be good to say explicitly which coordinate space the source rectangle and the default destination size use. createImageBitmap(img) gives a 200px-wide bitmap in Chrome Canary, Firefox Nightly, and Safari TP for both cases, so it uses image pixels; WebGL's texImage2D() probably needs the same answer.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions