WebGLRenderingContext.readPixels() - Web APIs
the webglrenderingcontext.readpixels() method of the webgl api reads a block of pixels from a specified rectangle of the current color framebuffer into an arraybufferview object.
... syntax // webgl1: void gl.readpixels(x, y, width, height, format, type, pixels); // webgl2: void gl.readpixels(x, y, width, height, format, type, glintptr offset); void gl.readpixels(x, y, width, height, format, type, arraybufferview pixels, gluint dstoffset); parameters x a glint specifying the first horizontal pixel that is read from the lower left corner of a rectangular block of pixels.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var pixels = new uint8array(gl.drawingbufferwidth * gl.drawingbufferheight * 4); gl.readpixels(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight, gl.rgba, gl.unsigned_byte, pixels); console.log(pixels); // uint8array specifications specification status comment webgl 1.0the definition of 'readpixels' in that specification.
... opengl es 2.0the definition of 'glreadpixels' in that specification.

<resolution> - CSS: Cascading Style Sheets
units dpi represents the number of dots per inch.
... screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater.
... as 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.
...And 6 more matches

Using the viewport meta tag to control layout on mobile browsers
for example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi).
... on high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers.
...it is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.
...And 3 more matches

Index - Web APIs
the created image is in a resolution of 96dpi.
...the returned image is in a resolution of 96 dpi.
... 2849 paintworklet.devicepixelratio css paint api, dpi, houdini, needsbrowsercompatibility, needsexample, needslivesample, property, reference, worklet, devicepixelratio, paintworklet the paintworklet.devicepixelratio read-only property of the paintworklet interface returns the current device's ratio of physical pixels to logical pixels.
...And 2 more matches

WebGL best practices - Web APIs
(this is okay for read buffers in conjunction with fences - see async data readback below.) readpixels() to the cpu (i.e.
...instead, use gpu-gpu readpixels in conjunction with async data readback.
...cbyteoffset, dstbuffer, /* optional */ dstoffset, /* optional */ length) { const sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); gl.flush(); await clientwaitasync(gl, sync, 0, 10); gl.deletesync(sync); gl.bindbuffer(target, buffer); gl.getbuffersubdata(target, srcbyteoffset, dstbuffer, dstoffset, length); gl.bindbuffer(target, null); return dest; } async function readpixelsasync(gl, x, y, w, h, format, type, dest) { const buf = gl.createbuffer(); gl.bindbuffer(gl.pixel_pack_buffer, buf); gl.bufferdata(gl.pixel_pack_buffer, dest.bytelength, gl.stream_read); gl.readpixels(x, y, w, h, format, type, 0); gl.bindbuffer(gl.pixel_pack_buffer, null); await getbuffersubdataasync(gl, gl.pixel_pack_buffer, buf, 0, dest); gl.deletebuffer(buf); return dest; ...
... devicepixelratio and high-dpi rendering handling devicepixelratio != 1.0 is tricky.

Window.devicePixelRatio - Web APIs
this is useful when dealing with the difference between rendering on a standard display versus a hidpi or retina display, which use more screen pixels to draw the same objects, resulting in a sharper image.
...a value of 1 indicates a classic 96 dpi (76 dpi on some platforms) display, while a value of 2 is expected for hidpi/retina displays.
... other values may be returned as well in the case of unusually low resolution displays or, more often, when a screen has a higher pixel depth than simply double the standard resolution of 96 or 76 dpi.
...the media query, which begins as (resolution: 1dppx) (for standard displays) or (resolution: 2dppx) (for retina/hidpi displays), checks to see if the current display resolution matches a specific number of device dots per px.

Multimedia: Images - Learn web development
on top of that you'd also want to serve higher resolution images to those devices that boast a high dpi screen (e.g.
... two interesting effects to keep in mind regarding high dpi screens is that: with high dpi screen, humans will spot compression artifacts a lot later, meaning that for images meant for these screens you can crank up compression beyond usual.
... only a very few people can spot an increase in resolution beyond 2× dpi, which means you don't need to serve images resolving higher than 2×.

ui/button/action - Archive of obsolete content
on a high resolution screen (such as a hidpi display), these are doubled to 36 x 36 and 64 x 64 pixels, respectively.
...however, the icons in the toolbar will not quite fill the space available, so you can instead supply four icons: icon: { "18": "./addon18.png", // toolbar icon non hidpi "32": "./addon32.png", // menu panel icon non hidpi "36": "./addon36.png", // toolbar icon hidpi "64": "./addon64.png" // menu panel icon hidpi } optional options: name type disabled boolean determines whether the button is disabled.

ui/button/toggle - Archive of obsolete content
on a high resolution screen (such as a hidpi display), these are doubled to 36 x 36 and 64 x 64 pixels, respectively.
...however, the icons in the toolbar will not quite fill the space available, so you can instead supply four icons: icon: { "18": "./addon18.png", // toolbar icon non hidpi "32": "./addon32.png", // menu panel icon non hidpi "36": "./addon36.png", // toolbar icon hidpi "64": "./addon64.png" // menu panel icon hidpi } optional options: name type disabled boolean determines whether the button is disabled.

CSS pixel - MDN Web Docs Glossary: Definitions of Web-related terms
by definition, this is the physical size of a single pixel at a pixel density of 96 dpi, located an arm's length away from the viewer's eyes.
...in other words, if the user is on a phone with a pixel density of 266 dpi, and an element is placed on the screen with a width of 96px, the actual width of the element would be 266 device pixels.

The Firefox codebase: CSS Guidelines
hdpi support it's recommended to use svg since it keeps the css clean when supporting multiple resolutions.
... however, if only 1x and 2x png assets are available, you can use this @media query to target higher density displays (hdpi): @media (min-resolution: 1.1dppx) ...

image-set() - CSS: Cascading Style Sheets
<resolution> units include x or dppx, for dots per pixel unit, dpi, for dots per inch, and dpcm for dots per centimeter.
... examples background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x, "cat-print.png" 600dpi); this example shows how to use image-set() to provide two alternative background-image options, chosen depending on the resolution needed: a normal version and a high-resolution version.

<length> - CSS: Cascading Style Sheets
for low-dpi devices, the unit px represents the physical reference pixel; other units are defined relative to it.
... for high-dpi devices, inches (in), centimeters (cm), and millimeters (mm) are the same as their physical counterparts.

<picture>: The Picture element - HTML: Hypertext Markup Language
if providing higher-density versions of an image for high-dpi (retina) display, use srcset on the <img> element instead.
... a width descriptor, followed by a w (such as 300w); or a pixel density descriptor, followed by an x (such as 2x) to serve a high-res image for high-dpi screens.

ui/frame - Archive of obsolete content
it occupies the whole width of the browser window and is 18 pixels high on a normal-resolution display or 36 pixels high on a high-resolution (hidpi) display.