WebGLRenderingContext.readPixels() - Web APIs
y a glint specifying the first vertical pixel that is read from the lower left corner of a rectangular block of pixels. width a glsizei specifying the width of the rectangle. ...
... y a glint specifying the first vertical pixel that is read from the lower left corner of a rectangular block of pixels. width a glsizei specifying the width of the rectangle. ...
... y a glint specifying the first vertical pixel that is read from the lower left corner of a rectangular block of pixels. width a glsizei specifying the width of the rectangle. ...
...And 2 more matches

Index - Web APIs
1589 htmlcanvaselement.toblob() api, canvas, htmlcanvaselement, method, reference the htmlcanvaselement.toblob() method creates a blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent. if type is not specified, the image type is image/png. the created image is in a resolution of 96dpi. 1590 htmlcanvaselement.todataurl() api, canvas, htmlcanvaselement, method, reference the htmlcanvaselement.todataurl() method returns a data uri containing a representation of the image in the format specified by the type parameter (defaults to png). the returned image is in a resolution of 96 dpi. 1591 htmlcanvaselement.transfercontroltooffscreen() api, exper...
...css.paintworklet. 2848 paintworklet.devicepixelratio api, css, css paint api, houdini, painting, 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. 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. 2850 paintworklet.registerpaint api, css, css paint api, houdini, painting, property, referen...
...ausetransformfeedback() method of the webgl 2 api pauses a transform feedback operation. 4661 webgl2renderingcontext.readbuffer() api, experimental, method, reference, webgl, webgl2 the webgl2renderingcontext.readbuffer() method of the webgl 2 api selects a color buffer as the source for pixels for subsequent calls to copyteximage2d, copytexsubimage2d, copytexsubimage3d or readpixels. 4662 webgl2renderingcontext.renderbufferstoragemultisample() api, experimental, method, reference, webgl, webgl2 the webgl2renderingcontext.renderbufferstoragemultisample() method of the webgl 2 api returns creates and initializes a renderbuffer object's data store and allows specifying a number of samples to be used. 4663 webgl2renderingcontext.resumetransfor...
...ntext the webglrenderingcontext.pixelstorei() method of the webgl api specifies the pixel storage modes. 4816 webglrenderingcontext.polygonoffset() api, method, reference, webgl, webglrenderingcontext the webglrenderingcontext.polygonoffset() method of the webgl api specifies the scale factors and units to calculate depth values. 4817 webglrenderingcontext.readpixels() api, method, reference, webgl, webglrenderingcontext 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. 4818 webglrenderingcontext.renderbufferstorage() api, method, reference, webgl, webglrenderingcontext the webglrenderingcontext.re...

Using the viewport meta tag to control layout on mobile browsers
he page in or out. usage of user-scalable=no can cause accessibility issues to users with visual impairments such as low vision. a pixel is not a pixel in recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. for example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each css "pixel". initially this caused usability and readability problems on many touch-optimized web sites. peter-paul koch wrote about this problem in a pixel is not a pixel. on high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. thei...
..., which says: if the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. 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. for web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. but remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations. the default pixel ratio...
..., this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. but remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations. the default pixel ratio depends on the display density. on a display with density less than 200dpi, the ratio is 1.0. on displays with density between 200 and 300dpi, the ratio is 1.5. for displays with density over 300dpi, the ratio is the integer floor(density/150dpi). note that the default ratio is true only when the viewport scale equals 1. otherwise, the relationship between css pixels and device pixels depends on the current zoom level. viewport width and screen width sites can set the...

WebGL best practices - Web APIs
shader compilation below.) get*parameter() in general: possible flush + round-trip. in some cases, these will be cached to avoid the round-trip, but try to avoid relying on this. checkframebufferstatus(): possible flush + round-trip. getbuffersubdata(): usual finish + round-trip. (this is okay for read buffers in conjunction with fences - see async data readback below.) readpixels() to the cpu (i.e. without an unpack buffer bound): finish + round-trip. instead, use gpu-gpu readpixels in conjunction with async data readback. always keep vertex attrib 0 array-enabled if you draw with vertex attrib 0 array disabled, you will force the browser to do complicated emulation when running on desktop opengl (such as on macos). this is because in desktop opengl, nothing gets...
...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; ...
...ach browser content frame. for robust non-trivial (particularly webgl) content, requestpostanimationframe ("rpaf") is the first js run at the beginning of each browser content frame. that is, it's the first js run after raf callbacks and the browser content (transaction) presentation step. (rpaf explainer) this allows as much time as possible for rendering each frame. devicepixelratio and high-dpi rendering handling devicepixelratio != 1.0 is tricky. while the common approach is to set canvas.width = width * devicepixelratio, this will cause moire artifacts with non-integer values of devicepixelratio, as is common with ui scaling on windows, as well as zooming on all platforms. instead, we can use non-integer values for css's top/bottom/left/right to fairly reliably 'pre-snap' our canvas...

Window.devicePixelRatio - Web APIs
ion in css pixels for the current display device. this value could also be interpreted as the ratio of pixel sizes: the size of one css pixel to the size of one physical pixel. in simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single css pixel. 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. you can use window.matchmedia() to check if the value of devicepixelratio changes (which can happen, for example, if the user drags the window to a display with a different pixel density). see the example below. syntax value = window.devicepixelratio; value a double-precision floating-poi...
... if the value of devicepixelratio changes (which can happen, for example, if the user drags the window to a display with a different pixel density). see the example below. syntax value = window.devicepixelratio; value a double-precision floating-point value indicating the ratio of the display's resolution in physical pixels to the resolution in css pixels. 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. examples correcting resolution in a <canvas> a <canvas> can appear too blurry on retina screens. use...
... () => { let pr = window.devicepixelratio; let prstring = (pr * 100).tofixed(0); pixelratiobox.innertext = `${prstring}% (${pr.tofixed(2)})`; } updatepixelratio(); matchmedia(mqstring).addlistener(updatepixelratio); the string mqstring is set up to be the media query itself. 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. the updatepixelratio() function fetches the current value of devicepixelratio, then sets the innertext of the element pixelratiobox to a string which displays the ratio both as a percentage and as a raw decimal value with up to two decimal places. then the updatepixelratio() function is ...

<resolution> - CSS: Cascading Style Sheets
in media queries, denotes the pixel density of an output device, i.e., its resolution. on screens, the units are related to css inches, centimeters, or pixels, not physical values. syntax the <resolution> data type consists of a strictly positive <number> followed by one of the units listed below. as with all css dimensions, there is no space between the unit literal and the number. 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. dpcm represents the number of dots per centimeter. as 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi. dppx represents the number of dots per px unit. due to the 1:96 fixed ratio of css in to css px, 1dppx is equiv...
...s 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. dpcm represents the number of dots per centimeter. as 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi. dppx represents the number of dots per px unit. due to the 1:96 fixed ratio of css in to css px, 1dppx is equivalent to 96dpi, which corresponds to the default resolution of images displayed in css as defined by image-resolution. x alias for dppx. note: although the number 0 is always the same regardless of unit, the unit may not be omitted. in other words, 0 is invalid and does not represent 0dpi, 0dpcm, or 0dppx. examples use in a media query @media print and (min-resolution: 300dpi) { ... } valid resolution...
...ch corresponds to the default resolution of images displayed in css as defined by image-resolution. x alias for dppx. note: although the number 0 is always the same regardless of unit, the unit may not be omitted. in other words, 0 is invalid and does not represent 0dpi, 0dpcm, or 0dppx. examples use in a media query @media print and (min-resolution: 300dpi) { ... } valid resolutions 96dpi 50.82dpcm 3dppx invalid resolutions 72 dpi spaces are not allowed between the number and the unit. ten dpi the number must use digits only. 0 the unit is required. specifications specification status comment css values and units module level 4the definition of '<resolution>' in that specification. editor's draft adds the x unit. css...

ui/button/action - Archive of obsolete content
"64" : "./firefox-64.png" } }); if you use the final form, firefox will automatically choose the best-fit icon for your button, depending on the device screen resolution and where the button is in the ui. on a device with a "normal" screen resolution, the toolbar has space for 18 x 18 pixels and the menu panel has space for 32 x 32 pixels. on a high resolution screen (such as a hidpi display), these are doubled to 36 x 36 and 64 x 64 pixels, respectively. so you can supply three icon files: icon: { "16": "./addon16.png", "32": "./addon32.png", "64": "./addon64.png" } this will look fine in both toolbar and menu panel, and for both screen resolutions. however, the icons in the toolbar will not quite fill the space available, so you can inste...
...y three icon files: icon: { "16": "./addon16.png", "32": "./addon32.png", "64": "./addon64.png" } this will look fine in both toolbar and menu panel, and for both screen resolutions. 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. disabled buttons appear disabled in the ui, and do not respond to clicks. defaults to fa...

ui/button/toggle - Archive of obsolete content
"64" : "./firefox-64.png" } }); if you use the final form, firefox will automatically choose the best-fit icon for your button, depending on the device screen resolution and where the button is in the ui. on a device with a "normal" screen resolution, the toolbar has space for 18 x 18 pixels and the menu panel has space for 32 x 32 pixels. on a high resolution screen (such as a hidpi display), these are doubled to 36 x 36 and 64 x 64 pixels, respectively. so you can supply three icon files: icon: { "16": "./addon16.png", "32": "./addon32.png", "64": "./addon64.png" } this will look fine in both toolbar and menu panel, and for both screen resolutions. however, the icons in the toolbar will not quite fill the space available, so you can inste...
...y three icon files: icon: { "16": "./addon16.png", "32": "./addon32.png", "64": "./addon64.png" } this will look fine in both toolbar and menu panel, and for both screen resolutions. 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. disabled buttons appear disabled in the ui, and do not respond to clicks. defaults to fa...

NSC_SetPIN - Archive of obsolete content
uloldlen [input] .; pnewpin [input] .; ulnewlen [input] . description nsc_setpin modifies the pin of user that is currently logged in. ...
...uloldlen [input] .; pnewpin [input] .; ulnewlen [input] . description nsc_setpin modifies the pin of user that is currently logged in. ...

CSS pixel - MDN Web Docs Glossary: Definitions of Web-related terms
the css pixel—denoted in css with the suffix px—is a unit of length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible. 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. that definition, of course, leaves a lot of wiggle room, as the terms "be comfortably seen" and "an arm's length away" are imprecise, varying from person to person. when a user is sitting at a desk in front of a desktop, the display is generally substantially farther away from their eyes than when they're on a cell phone, for instance. as such, it generally suffices to say that when the unit px is used, the go...
... desktop, the display is generally substantially farther away from their eyes than when they're on a cell phone, for instance. as such, it generally suffices to say that when the unit px is used, the goal is to try to have the distance 96px equal about 1 inch on the screen, regardless of the actual pixel density of the screen. 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. learn more technical reference css values and units module, section 5.2: absolute lengths learn about it css length explained on the mdn hacks blog ...

Multimedia: Images - Learn web development
"image/webp" src="giphy.webp"> <img src="giphy.gif"> </picture> serving the optimal size in image delivery the "one size fits all" approach will not yield the best results, meaning that for smaller screens you would want to serve images with smaller resolution and vis-versa for larger screens. on top of that you'd also want to serve higher resolution images to those devices that boast a high dpi screen (e.g. "retina"). so apart from creating plenty of intermediate image variants you also need a way to serve the right file to the right browser. that's where you would need to upgrade your <picture> and <source> elements with media and/or sizes attributes. a detailed article on how to combine all of these attributes can be found here. two interesting effects to keep in mind regarding high ...
... screen (e.g. "retina"). so apart from creating plenty of intermediate image variants you also need a way to serve the right file to the right browser. that's where you would need to upgrade your <picture> and <source> elements with media and/or sizes attributes. a detailed article on how to combine all of these attributes can be found here. 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×. controlling the priority (and ordering) of downloading images get...

The Firefox codebase: CSS Guidelines
n lead to undefined behaviour. css selectors when targetting the root element of a page, using :root is the most performant way of doing so. reflows and style flushes see performance best practices for firefox front-end engineers for more information about this. ...
...g when convenient, avoid setting the opacity property on text as it will cause text to be aliased differently. hdpi support it's recommended to use svg since it keeps the css clean when supporting multiple resolutions. see the svg guidelines for more information on svg usage. ...

FC_SetPIN
uloldlen [input] the length in bytes of the old pin. pnewpin [input] points to the new pin. ulnewlen [input] the length in bytes of the new pin. description fc_setpin modifies the pin of the user. ...
...uloldlen [input] the length in bytes of the old pin. pnewpin [input] points to the new pin. ulnewlen [input] the length in bytes of the new pin. description fc_setpin modifies the pin of the user. ...

image-set() - CSS: Cascading Style Sheets
t() = image-set( <image-set-option># ) where <image-set-option> = [ <image> | <string> ] <resolution> and <string> is an <url> values most commonly you'll see an url() <string> value, but the <image> can be any image type except for an image set. the image-set() function can not be nested inside another image-set() function. ...
... function can not be nested inside another image-set() function. <resolution> units include x or dppx, for dots per pixel unit, dpi, for dots per inch, and dpcm for dots per centimeter. every image within an image-set() must have a unique resolution. 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. accessibility concerns browsers do not provide any special information on background images to assistive technology. this is important primarily for screen readers, as a screen reader will not announce its pr...

<length> - CSS: Cascading Style Sheets
length units absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. this is done by anchoring one of the units to a physical unit, and then defining the others relative to it. the anchor is done differently for low-resolution devices, such as screens, versus high-resolution devices, such as printers. ...
...therefore, the px unit is defined relative to them (1/96 of 1 inch). note: many users increase their user agent's default font size to make text more legible. ...