scaleY() - CSS: Cascading Style Sheets
the scaley() css function defines a transformation that resizes an element along the y-axis (vertically). its result is a <transform-function> data type. it modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scaley(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the transform-origin property). note: scaley(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1). transform: rotatex(180deg); === transform: scaley(-1); syntax scaley(s) values s is a <number> representing the scaling factor to apply on the ordinate of each point of the element. ...
...<number> representing the scaling factor to apply on the ordinate of each point of the element. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10 0s 1000s0001 1000s0001 10000s0000100001 [1 0 0 s 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scaley(0.6); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'scaley()' in that specification. working draft initial definition ...

Image file type and format guide - Web media technologies
true color 8 and 16 each pixel is represented by three d-bit values indicating the level of the red, green, and blue color components. indexed color 1, 2, 4, and 8 each pixel is a d-bit value indicating...
...ty chrome 59, edge 12, firefox 3, opera 46, safari 8 maximum dimensions 2,147,483,647×2,147,483,647 pixels supported color modes color mode bits per component (d) description greyscale 1, 2, 4, 8, and 16 each pixel consists of a single d-bit value indicating the brightness of the greyscale pixel. true color 8 and 16 each pixel is represented by three d-bit values indicating the level of the red, green, and blue color components. indexed color 1, 2, 4, and 8 each pixel is a d-bit value indicating an index into a color palette which is contained within a plte chunk in the apng file; the colors in the palette all us...
... 8 and 16 each pixel is represented by three d-bit values indicating the level of the red, green, and blue color components. indexed color 1, 2, 4, and 8 each pixel is a d-bit value indicating an index into a color palette which is contained within a plte chunk in the apng file; the colors in the palette all use an 8-bit depth. greyscale with alpha 8 and 16 each pixel is represented by two d-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is. true color with alpha 8 and 16 each pixel is comprised of four d-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is. ...
...And 19 more matches

Index - Web APIs
difference being that it doesn't have the src and alt attributes. indeed, the <canvas> element has only two attributes, width and height. these are both optional and can also be set using dom properties. when no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. the element can be sized arbitrarily by css, but during rendering the image is scaled to fit its layout size: if the css sizing doesn't respect the ratio of the initial canvas, it will appear distorted. 523 compositing and clipping canvas, graphics, html, html5, intermediate, tutorial we can not only draw new shapes behind existing shapes but we can also use it to mask off certain areas, clear sections from the canvas (not limited to rectangles like the clear...
...l on the canvas. the origin of this grid is positioned in the top left corner at coordinate (0,0). all elements are placed relative to this origin. so the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default. 526 drawing text canvas, graphics, intermediate, tutorial the canvas rendering context provides two methods to render text: 527 finale canvas, graphics, tutorial there are a variety of demos and further explanations about canvas on these sites: 528 hit regions and accessibility canvas, graphics, t...
...srenderingcontext2d.globalcompositeoperation property of the canvas 2d api sets the type of compositing operation to apply when drawing new shapes. 575 canvasrenderingcontext2d.imagesmoothingenabled api, canvas, canvasrenderingcontext2d, property, reference the imagesmoothingenabled property of the canvasrenderingcontext2d interface, part of the canvas api, determines whether scaled images are smoothed (true, default) or not (false). on getting the imagesmoothingenabled property, the last value it was set to is returned. 576 canvasrenderingcontext2d.imagesmoothingquality api, canvas, canvasrenderingcontext2d, experimental, property, reference, imagesmoothingquality the imagesmoothingquality property of the canvasrenderingcontext2d interface, part of the...
...And 17 more matches

WebGL model view projection - Web APIs
this article explores how to take data within a webgl project, and project it into the proper spaces to display it on the screen. it assumes a knowledge of basic matrix math using translation, scale, and rotation matrices. it explains the three core matrices that are typically used when composing a 3d scene: the model, view and projection matrices. note: this article is also available as an mdn content kit. it also uses a collection of utility functions available under the mdn global object. the model, view, and projection matrices individual transformations of points and polygons in space in webgl are handled by the basic transformation matrices like translation, scale, and rotation. these matrices can be composed together and grouped in special ways to make them useful for rendering com...
...matrix is computed and set. this matrix represents the transformations to be performed on every point making up the model in order to move it into the correct space, and to perform any other needed transforms on each point in the model. this applies not just to each vertex, but to every single point on every surface of the model as well. in this case, for every frame of the animation a series of scale, rotation, and translation matrices move the data into the desired spot in clip space. the cube is the size of clip space (-1,-1,-1) to (1,1,1) so it will need to be shrunk down in order to not fill the entirety of clip space. this matrix is sent directly to the shader, having been multiplied in javascript beforehand. the following code sample defines a method on the cubedemo object that will cr...
...clip space. this matrix is sent directly to the shader, having been multiplied in javascript beforehand. the following code sample defines a method on the cubedemo object that will create the model matrix. it uses custom functions to create and multiply matrices as defined in the mdn webgl shared code. ...
...And 17 more matches

Matrix math for the web - Web APIs
in typical (cartesian) coordinates. this causes stretching or contracting of the object in the corresponding directions. the amount of change to apply to each of the width, height, and depth is placed diagonally starting at the top-left corner and making their way down towar...
...in typical (cartesian) coordinates. this causes stretching or contracting of the object in the corresponding directions. the amount of change to apply to each of the width, height, and depth is placed diagonally starting at the top-left corner and making their way down toward the bottom-rig...
...ight, and depth. in typical (cartesian) coordinates. this causes stretching or contracting of the object in the corresponding directions. the amount of change to apply to each of the width, height, and depth is placed diagonally starting at the top-left corner and making their way down toward the bottom-right. let w = 1.5; // width (x) let h = 0.7; // height (y) let d = 1; // depth (z) let scalematrix = [ w, 0, 0, 0, 0, h, 0, 0, 0, 0, d, 0, 0, 0, 0, 1 ]; view on jsfiddle rotation matrix a rotation matrix is used to rotate a point or object. rotation matrices look a little bit more complicated than scaling and transform matrices. they use trigonometric functions to perform the rotation. while this section won't break the steps down int...
...And 9 more matches

Using the viewport meta tag to control layout on mobile browsers
so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques. to mitigate this problem, apple introduced the "viewport meta tag" in safari ios to let web developers control the viewport's size and scale. many other mobile browsers now support this tag, although it is not part of any web standard. apple's documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in fennec. for example, safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mi...
...tion says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators. learn more about viewports in different mobile browsers in a tale of two viewports at quirksmode.org. viewport basics a typical mobile-optimized site contains something like the following: <meta name="viewport" content="width=device-width, initial-scale=1"> the width property controls the size of the viewport. it can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in css pixels at a scale of 100%. (there are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.) the initial-...
...=1"> the width property controls the size of the viewport. it can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in css pixels at a scale of 100%. (there are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.) the initial-scale property controls the zoom level when the page is first loaded. the maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the 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 p...
...And 8 more matches

Element: wheel event - Web APIs
ispatch a scroll event. even when it does, the delta* values in the wheel event don't necessarily reflect the content's scrolling direction. therefore, do not rely on the wheel event's delta* properties to get the scrolling direction. instead, detect value changes of scrollleft and scrolltop of the target in the scroll event. ...
... event don't necessarily reflect the content's scrolling direction. therefore, do not rely on the wheel event's delta* properties to get the scrolling direction. instead, detect value changes of scrollleft and scrolltop of the target in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
...ement via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
...And 7 more matches

transform - CSS: Cascading Style Sheets
it modifies the coordinate space of the css visual formatting model. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if the property has a value different than none, a stacking context will be created. in that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains. only transformable elements can be transformed. ...
...3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotatex(10deg); transform: rotatey(10deg); transform: rotatez(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translatex(2em); transform: translatey(3in); transform: translatez(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scalex(2); transform: scaley(0.5); transform: scalez(0.3); transform: skew(30deg, 20deg); transform: skewx(30deg); transform: skewy(1.07rad); /* multiple function values */ transform: translatex(10px) rotate(10deg) translatey(5px); transform: perspective(500px) translate(10px, 0, 20px) rotatey(3deg); /* global values */ transform: inherit; ...
...)<translatex()> = translatex( <length-percentage> )<translat...
...And 7 more matches

Transformations - Web APIs
« previousnext » earlier in this tutorial we've learned about the canvas grid and the coordinate space. until now, we only used the default grid and changed the size of the overall canvas for our needs. with transformations there are more powerful ways to translate the origin to a different position, rotate the grid and even scale it. saving and restoring state before we look at the transformation methods, let's look at two other methods which are indispensable once you start generating ever more complex drawings. save() saves the entire state of the canvas. restore() restores the most recently saved canvas state. canvas states are stored on a stack. every time the save() method is called, the current drawing state is pushed onto the stack. a drawing state consists ...
...able once you start generating ever more complex drawings. save() saves the entire state of the canvas. restore() restores the most recently saved canvas state. canvas states are stored on a stack. every time the save() method is called, the current drawing state is pushed onto the stack. a drawing state consists of the transformations that have been applied (i.e. translate, rotate and scale – see below). the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled. the current clipping path, which we'll see in the next section. you can call the save() me...
...und its own center, we translate the canvas to the center of the rectangle, then rotate the canvas, then translate the canvas back to 0,0, and then draw the rectangle. <canvas id="canvas" width="300" height="200"></canvas> draw(); screenshotlive sample scaling the next transformation method is scaling. we use it to increase or decrease the units in our canvas grid. ...
...And 6 more matches

Pixel manipulation with canvas - Web APIs
e represented by myimagedata to the top left corner of the context, you can simply do the following: ctx.putimagedata(myimagedata, 0, 0); grayscaling and inverting colors in this example we iterate over all pixels to change their values, then we put the modified pixel array back to the canvas using putimagedata(). the invert function simply subtracts each color from the max value 255. ...
...s in this example we iterate over all pixels to change their values, then we put the modified pixel array back to the canvas using putimagedata(). the invert function simply subtracts each color from the max value 255. the grayscale function simply uses the average of red, green and blue. you can also use a weighted average, given by the formula x = 0.299r + 0.587g + 0.114b, for example. see grayscale on wikipedia for more information. ...
...nvas using putimagedata(). the invert function simply subtracts each color from the max value 255. the grayscale function simply uses the average of red, green and blue. you can also use a weighted average, given by the formula x = 0.299r + 0.587g + 0.114b, for example. see grayscale on wikipedia for more information. ...
...And 5 more matches

SVGTransform - Web APIs
svg transform interface svgtransform is the interface for one of the component transformations within an svgtransformlist; thus, an svgtransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a transform attribute. an svgtransform object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...omponent (e.g., scale(…) or matrix(…)) within a transform attribute. an svgtransform object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...it is invalid to attempt to define a new value of this type or to attempt to switch an existing val...
...And 5 more matches

Numeric Controls - Archive of obsolete content
ys while the textbox is focused. the decimalplaces attribute indicates how many decimal places to show. the default value is 0, which means show integers only. however a different value may be used to show decimal values. <textbox type="number" decimalplaces="2"/> in this example, two digits right of the decimal point are shown. values with additional fractional digits are rounded to two digits. ...
...the textbox is focused. the decimalplaces attribute indicates how many decimal places to show. the default value is 0, which means show integers only. however a different value may be used to show decimal values. <textbox type="number" decimalplaces="2"/> in this example, two digits right of the decimal point are shown. values with additional fractional digits are rounded to two digits. ...
...t value is 0, which means show integers only. however a different value may be used to show decimal values. <textbox type="number" decimalplaces="2"/> in this example, two digits right of the decimal point are shown. values with additional fractional digits are rounded to two digits. scales a scale element may also be used to select from a range of values. instead of a textbox however, a sliding scale is used. the user may drag the thumb of the scale to adjust the value. ...
...And 4 more matches

Using the CSS Typed Object Model - Web APIs
<button>styled button</button> // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // cssmathsum example let btnwidth = allcomputedstyles.get('width') console.log( btnwidth ); // cssmathsum co...
...tedstylemap(); // cssmathsum example let btnwidth = allcomputedstyles.get('width') console.log( btnwidth ); // cssmathsum console.log( btnwidth.values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( btnwidth.operator ); // 'sum' // csstransformvalue let transform = allcomputedstyles.get('transform'); console.log( transform ); // csstransformvalue {0: cssscale, 1: csstranslate, length: 2, is2d: true} console.log( transform.length ); // 1 console.log( transform[0] ); // cssscale {x: cssunitvalue, y: cssunitvalue, z: cssunitvalue, is2d: true} console.log( transform[0].x ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].y ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].z ); // cssunitvalue {val...
...cssmathsum returned. cssmathsum.values is a cssnumericarray with 2 cssunitvalues. ...
...And 4 more matches

Using images - Web APIs
ctx.drawimage(img, 0, 0); ctx.beginpath(); ctx.moveto(30, 96); ctx.lineto(70, 66); ctx.lineto(103, 76); ctx.lineto(170, 15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; } the resulting graph looks like this: screenshotlive sample scaling the second variant of the drawimage() method adds two new parameters and lets us place scaled images on the canvas. drawimage(image, x, y, width, height) this adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas. example: tiling an image in this example, we'll use an image as a wallpaper and repeat it several times on the canvas. this is done simply by looping and placing the scaled images at different positions.
...scaling is probably best not done if you've got some text in it which needs to remain legible. ...
...scaling is probably best not done if you've got some text in it which needs to remain legible. ...
...And 4 more matches

Border-image generator - CSS: Cascading Style Sheets
> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" data-unit="%" data-max="300" data-sensivity="10"> </div> </div> <div class="separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </di...
... freader.readasdataurl(file); return false; }; freader.onload = function(e) { imagecontrol.loadremoteimage(e.target.result); }; var load = function load() { browse.click(); }; browse.setattribute('type', 'file'); browse.style.display = 'none'; browse.onchange = loadimage; return { load: load }; })(); var imagecontrol = (function imagecontrol() { var scale = 0.5; var imgsource = new image(); var imgstate = null; var selected = null; var topics = ['slice', 'width', 'outset']; var properties = {}; properties['border1'] = { fill : false, slice_values : [27, 27, 27, 27], width_values : [20, 20, 20, 20], outset_values : [0, 0, 0, 0], slice_units : [0, 0, 0, 0], width_units : [0, 0, 0, 0], outset_units : [0, 0, 0,...
...rop['fill']); dropdownmanager.setvalue('image-repeat-x', prop['repeat'][0]); dropdownmanager.setvalue('image-repeat-y', prop['repeat'][1]); inputslidermanager.setvalue('preview-width', prop['size'][0]); inputslidermanager.setvalue('preview-height', prop['size'][1]); inputslidermanager.setvalue('preview-area-height', prop['preview_area']); }; var update = function update() { scale = math.min(300, (30000 / this.width) | 0); setscale(scale); inputslidermanager.setvalue('scale', scale, false); subject.style.backgroundimage = 'url("' + this.src + '")'; preview.style.borderimagesource = 'url("' + this.src + '")'; guidelines['slice-top'].setmax(this.height); guidelines['slice-right'].setmax(this.width); guidelines['slice-bottom'].setmax(this.height); g...
...And 4 more matches

filter - CSS: Cascading Style Sheets
in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3, #img13 { width:100%; height:auto; } grayscale() the grayscale() function converts the input image to grayscale. the value of amount defines the proportion of the conversion. a value of 100% is completely grayscale. a value of 0% leaves the input unchanged. values between 0% and 100% are linear multipliers on the effect. the lacuna value for interpolation is 0. filter: grayscale(100%) <table class="standard-table"> <thead> <tr> ...
...g" id="img1" class="internal default" src="/files/3716/test_form_5.jpeg" style="width: 100%;" /></td> <td><img alt="test_form_5.jpg" id="img2" class="internal default" src="/files/3716/test_form_5.jpeg" style="width: 100%;" /></td> <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="srgb"> <filter id="grayscale"> <fecolormatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0"/> </filter> <image xlink:href="/files/3716/test_form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /> </svg><div></td> <td><img alt="test_form_5_s.jpg" id="img4...
...And 4 more matches

Digital video concepts - Web media technologies
ay to describe this color system, even though the term was originally used specifically for analog coding of color, while ycbcr was used for digital color. however, today both terms are used for digital color. the prime symbol, ', indicates that gamma compression is being used. contemplating human vision we're able to represent an image this way because the human eye sees far more detail in greyscale than in color, thanks to biology. the human eye contains two kinds of photoreceptor (light-sensing) cells. the rods are highly-sensitive light intensity sensors. the cones are less sensitive but are able to detect color. because the eye has vastly more rods than cones (about 120 million rods to around 6 or 7 million cones), we see detail in greyscale, with color being far less detailed. in essen...
...of photoreceptor (light-sensing) cells. the rods are highly-sensitive light intensity sensors. the cones are less sensitive but are able to detect color. because the eye has vastly more rods than cones (about 120 million rods to around 6 or 7 million cones), we see detail in greyscale, with color being far less detailed. in essence, our eyes are like a camera with two image sensor chips: one greyscale and one color. the greyscale sensor is 120 megapixels, while the color sensor is only about 7 megapixels. these sensors physically occupy the same surface, called the retina, at the back of the eye. there are three types of cones, each of which responds to a particular wavelength band of incoming light, but also to the intensity of the light at that wavelength. each type of cone, then, captures ...
...avelength band of incoming light, but also to the intensity of the light at that wavelength. each type of cone, then, captures the relative reponse peaks at various wavelengths, and the brain uses this data to figure out the intensity and hue of the color of the light arriving at that part of the retina. as our eyes capture a scene, they essentially take two photos at once: a finely-detailed greyscale image and a somewhat fuzzy, lower-resolution map of the colors of light received across the retina at the same time. the final color image is created by the brain, which essentially layers the colors onto the greyscale pixels. yuv concepts yuv works by defining a color space with three components: luma (y') the brightness of the pixel. without the other two components, the luma of each pixe...
...And 4 more matches

Basic animations - Web APIs
window.requestanimationframe(draw); } init(); <canvas id="canvas" width="300" height="300"></canvas> screenshotlive sample an animated clock this example draws an animated clock, showing your current time. ...
...ark we took from wikipedia, but you could use any image that's larger than the canvas. var img = new image(); // user variables - customize these to change the image being scrolled, its // direction, and the speed. ...
...ection, and the speed. ...
...And 3 more matches

Optimizing canvas - Web APIs
s, 0, 0); avoid floating-point coordinates and use integers instead sub-pixel rendering occurs when you render objects on a canvas without whole values. ctx.drawimage(myimage, 0.3, 0.5); this forces the browser to do extra calculations to create the anti-aliasing effect. to avoid this, make sure to round all co-ordinates used in calls to drawimage() using math.floor(), for example. don’t scale images in drawimage cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in drawimage(). use multiple layered canvases for complex scenes in your application, you may find that some objects need to move or change frequently, while others remain relatively static. a possible optimization in this situation is to layer your items using multi...
...; } </style> use plain css for large background images if you have a static background image, you can draw it onto a plain <div> element using the css background property and position it under the canvas. this will negate the need to render the background to the canvas on every tick. scaling canvas using css transforms css transforms are faster since they use the gpu. ...
...nd images if you have a static background image, you can draw it onto a plain <div> element using the css background property and position it under the canvas. this will negate the need to render the background to the canvas on every tick. scaling canvas using css transforms css transforms are faster since they use the gpu. the best case is to not scale the canvas, or have a smaller canvas and scale up rather than a bigger canvas and scale down. ...
...And 3 more matches

Window.devicePixelRatio - Web APIs
se window.devicepixelratio to determine how much extra pixel density should be added to allow for a sharper image. html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // set display size (css pixels). ...
... extra pixel density should be added to allow for a sharper image. html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // set display size (css pixels). var size = 200; canvas.style.width = size + "px"; canvas.style.height = size + "px"; // set actual size in memory (scaled to account for extra pixel density). ...
... canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // set display size (css pixels). var size = 200; canvas.style.width = size + "px"; canvas.style.height = size + "px"; // set actual size in memory (scaled to account for extra pixel density). var scale = window.devicepixelratio; // change to 1 on retina screens to see blurry canvas. canvas.width = math.floor(size * scale); canvas.height = math.floor(size * scale); // normalize coordinate system to use css pixels. ...
...And 3 more matches

object-fit - CSS: Cascading Style Sheets
bject-position property. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax the object-fit property is specified as a single keyword chosen from the list of values below. values contain the replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. the entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box. cover the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. if the object's aspect r...
...box. if the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit. fill the replaced content is sized to fill the element’s content box. the entire object will completely fill the box. if the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit. none the replaced content is not resized. ...
...f its box, then the object will be stretched to fit. none the replaced content is not resized. scale-down the content is sized as if none or contain were specified, whichever would result in a smaller concrete object size. ...
...And 3 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
textbox element, making it a textbox specifically for entering numeric values. this will cause the spin buttons seen in figure 21 to appear. additional attributes that accompany this are min and max to set minimum and maximum values, and increment, which sets the amount by which one click on the spin buttons will change the displayed value. ...
...displayed value. figure 21: a textbox for numeric input sliders the scale element is used similarly to the volume slider in windows, allowing the user to vary a value by moving a slider up/down or left/right (see listing 28 and figure 22). note: although this control is also known as a slider, the slider element already exists in xul as a part of a scrollbar, so this element has been named "scale". ...
... figure 21: a textbox for numeric input sliders the scale element is used similarly to the volume slider in windows, allowing the user to vary a value by moving a slider up/down or left/right (see listing 28 and figure 22). note: although this control is also known as a slider, the slider element already exists in xul as a part of a scrollbar, so this element has been named "scale". ...
...And 2 more matches

CSS3 - Archive of obsolete content
w features present in early css text level 3 draft have being postponed to the next iteration of this module . css transforms level 1 working draft adds: the support of bi-dimensional transforms to be applied to any element using the css transform and transform-origin properties. ...
...s present in early css text level 3 draft have being postponed to the next iteration of this module . css transforms level 1 working draft adds: the support of bi-dimensional transforms to be applied to any element using the css transform and transform-origin properties. ...
...in early css text level 3 draft have being postponed to the next iteration of this module . css transforms level 1 working draft adds: the support of bi-dimensional transforms to be applied to any element using the css transform and transform-origin properties. ...
...And 2 more matches

Physics - Game development
of create(): ball.body.velocity.set(150, 150); removing our previous update instructions remember to remove our old method of adding values to x and y from the update() function: function update() { ball.x += 1; ball.y += 1; } we are now handling this properly, with a physics engine. ...
...ate(): ball.body.velocity.set(150, 150); removing our previous update instructions remember to remove our old method of adding values to x and y from the update() function: function update() { ball.x += 1; ball.y += 1; } we are now handling this properly, with a physics engine. ...
...elocity.set(150, 150); removing our previous update instructions remember to remove our old method of adding values to x and y from the update() function: function update() { ball.x += 1; ball.y += 1; } we are now handling this properly, with a physics engine. ...
...And 2 more matches

Scaling - Game development
« previousnext » this is the 2nd step out of 16 of the gamedev phaser tutorial. you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson02.html. scaling refers to how the game canvas will scale on different screen sizes. we can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later. ...
... step out of 16 of the gamedev phaser tutorial. you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson02.html. scaling refers to how the game canvas will scale on different screen sizes. we can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later. the phaser scale object there's a special scale object available in phaser with a few handy methods and properties available. ...
...the game canvas will scale on different screen sizes. we can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later. the phaser scale object there's a special scale object available in phaser with a few handy methods and properties available. update your existing preload() function as follows: function preload() { game.scale.scalemode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; } scalemode has a few different options available for how the canvas can be scaled: no_scale — nothing is scaled. exact_fit — scale the canvas to fill all the available space both vertically and horizontally, without preserving the aspect ratio. show_all —...
...And 2 more matches

Responsive design - Learn web development
in 2010 and described the use of three techniques in combination. the first was the idea of fluid grids, something which was already being explored by gillenwater, and can be read up on in marcotte's article, fluid grids (published in 2009 on a list apart). the second technique was the idea of fluid images. using a very simple technique of setting the max-width property to 100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger. this enables an image to scale down to fit in a flexibly-sized column, rather than overflow it, but not grow larger and become pixellated if the column becomes wider than the image. the third key component was the media query. media queries enable the type of layout switch that cameron...
... { display: grid; grid-template-columns: 1fr 1fr 1fr; } note: the grid layout version is even simpler as we can define the columns on the .wrapper: example, source code. responsive images the simplest approach to responsive images was as described in marcotte's early articles on responsive design. basically, you would take an image that was at the largest size that might be needed, and scale it down. this is still an approach used today, and in most stylesheets, you will find the following css somewhere: img { max-width: 100%; } there are obvious downsides to this approach. the image might be displayed a lot smaller than its intrinsic size, which is a waste of bandwidth — a mobile user may be downloading an image several times the size of what they actually see in the browser...
...up for mobile and redefine it in the media queries. the font then gradually increases as you increase the size of the viewport. see an example of this in action: example, source code. the viewport meta tag if you look at the html source of a responsive page, you will usually see the following <meta> tag in the <head> of the document. <meta name="viewport" content="width=device-width,initial-scale=1"> this meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended. why is this needed? because mobile browsers tend to lie about their viewport width. this meta tag exists because when the original iphone launched and people sta...
...And 2 more matches

Work with animations - Firefox Developer Tools
meline, with a draggable widget you can use to move to any point in the timeline and see the page at that point. it displays animations created using css transitions, css @keyframes rules, or the web animations api. starting in firefox 48, it will show animations applied to the ::before and ::after pseudo-elements. to see how it works, we'll walk through an example. the box below contains a grayscale icon, representing firefox developer edition. if you click the icon, it enlarges and changes to color, and the name of the browser appears. click the icon again to reverse the effect. these animations are made using the web animations api. let's use the animation inspector to see what's going on in this example. right-click in the box and select "inspect element" make sure the selected el...
...to the "animations" tab play the animation let's take a closer look at the contents of the animation inspector here: it shows a synchronized timeline for every animation applied to the selected element or its children. the timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed). animation bars each animation or transition is shown as a horizontal bar laid across the timeline. the bar is: blue if a transition was used to animate a property orange if a @keyframes animation was used green if the web animations api was used the bar contains a lightning bolt icon if the property was animated using the compositor thread (see mo...
...property in the set of keyframes used for the animation. both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. ...
...And 2 more matches

Document: wheel event - Web APIs
necessarily dispatch a scroll event. even when it does, the delta* values in the wheel event don't necessarily reflect the content's scrolling direction. therefore, do not rely on the wheel event's delta* properties to get the scrolling direction. instead, detect value changes of scrollleft and scrolltop in the scroll event. ...
...s in the wheel event don't necessarily reflect the content's scrolling direction. therefore, do not rely on the wheel event's delta* properties to get the scrolling direction. instead, detect value changes of scrollleft and scrolltop in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
... to scale an element using the mouse (or other pointing device) wheel. ...
...And 2 more matches

A basic 2D WebGL animation example - Web APIs
vas" width="600" height="460"> oh no! your browser doesn't support canvas! </canvas> javascript globals and initialization first, the global variables. we won't discuss these here; instead, we'll talk about them as they're used in the code to come. let gl = null; let glcanvas = null; // aspect ratio and coordinate system // details let aspectratio; let currentrotation = [0, 1]; let currentscale = [1.0, 1.0]; // vertex information let vertexarray; let vertexbuffer; let vertexnumcomponents; let vertexcount; // rendering data shared with the // scalers. let uscalingfactor; let uglobalcolor; let urotationvector; let avertexposition; // animation timing let previoustime = 0.0; let degreespersecond = 90.0; initializing the program is handled through a load event handler called startup...
...tup() { glcanvas = document.getelementbyid("glcanvas"); gl = glcanvas.getcontext("webgl"); const shaderset = [ { type: gl.vertex_shader, id: "vertex-shader" }, { type: gl.fragment_shader, id: "fragment-shader" } ]; shaderprogram = buildshaderprogram(shaderset); aspectratio = glcanvas.width/glcanvas.height; currentrotation = [0, 1]; currentscale = [1.0, aspectratio]; vertexarray = new float32array([ -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5 ]); vertexbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, vertexbuffer); gl.bufferdata(gl.array_buffer, vertexarray, gl.static_draw); vertexnumcomponents = 2; vertexcount = vertexarray.length/vertexnumcomponents; currentangle = 0.0; r...
...shaderprogram(), which returns the compiled and linked shader program. we'll look at how this works next. once the shader program is built, we compute the aspect ratio of our context by dividing its width by its height. then we set the current rotation vector for the animation to [0, 1], and the scaling vector to [1.0, aspectratio]. the scaling vector, as we saw in the vertex shader, is used to scale the coordinates to fit the -1.0 to 1.0 range. the array of vertices is created next, as a float32array with six coordinates (three 2d vertices) per triangle to be drawn, for a total of 12 values. as you can see, we're using a coordinate system of -1.0 to 1.0 for each axis. why, you may ask, do we need to do any adjustments at all? this is simply because our context is not square. we're using a ...
...And 2 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
, scaling involves multiplying each of the x, y, and z coordinate values in a position or vertex by a scaling factor for that axis. these may or may not necessarily be identical for each axis, though the closest result you can get to a zoom effect would involve using the same value for each. this would need to be applied to every vertex in the scene—ideally in the vertex shader. ...
...n a position or vertex by a scaling factor for that axis. these may or may not necessarily be identical for each axis, though the closest result you can get to a zoom effect would involve using the same value for each. this would need to be applied to every vertex in the scene—ideally in the vertex shader. if you want to scale up by a factor of 2, you need to multiply each component by 2.0. to scale down by the same amount, multiply them by -2.0. ...
... zoom effect would involve using the same value for each. this would need to be applied to every vertex in the scene—ideally in the vertex shader. if you want to scale up by a factor of 2, you need to multiply each component by 2.0. to scale down by the same amount, multiply them by -2.0. in matrix terms, this is performed using a transform matrix with scaling factored into it, like this: let scaletransform = [ sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1 ]; this matrix represents a transform that scales up or down by a factor indicated by (sx, sy, sz), where sx indicates the scaling factor along the x axis, sy the scaling factor along the y axis, and sz the factor for the z axis. if any of these values differs from the others, the result will be stretching or co...
...And 2 more matches

Web video codec guide - Web media technologies
mes, which are used to repair any damage or artifact residue that's currently visible. aliasing aliasing is a general term for anything that upon being reconstructed from the encoded data does not look the same as it did before compression. there are many forms of aliasing; the most common ones you may see include: moiré patterns a unknown prefix: moiré pattern. is a large-scale spatial interference pattern produced when a pattern in the source image and the manner in which the encoder operates are slightly out of alignment spatially. the artifacts generated by the encoder then introduce strange, swirling effects in the source image's pattern upon decoding. staircase effect the staircase effect is a spatial artifact that occurs when diagonal st...
...hile level 6.3 can reach 120 fps compression lossy dct-based algorithm supported frame sizes 8 x 8 pixels to 65,535 x 65535 pixels with each dimension allowed to take any value between these supported color modes profile color depths chroma subsampling main 8 or 10 4:0:0 (greyscale) or 4:2:0 high 8 or 10 4:0:0 (greyscale), 4:2:0, or 4:4:4 professional 8, 10, or 12 4:0:0 (greyscale), 4:2:0, 4:2:2, or 4:4:4 hdr support yes variable frame rate (vfr) support yes browser compatibility feature chrome edge fi...
...r interesting profiles: profile color depths chroma subsampling constrained baseline (cbp) 8 4:2:0 baseline (bp) 8 4:2:0 extended (xp) 8 4:2:0 main (mp) 8 4:2:0 high (hip) 8 4:0:0 (greyscale) and 4:2:0 progressive high (prohip) 8 4:0:0 (greyscale) and 4:2:0 high 10 (hi10p) 8 to 10 4:0:0 (greyscale) and 4:2:0 high 4:2:2 (hi422p) 8 to 10 4:0:0 (greyscale), 4:2:0, and 4:2:2 high 4:4:4 predictive 8 to 14 4:0:0 (greyscale), 4:2:0, 4:2:2, and 4:4:4 ...
...And 2 more matches

preserveAspectRatio - SVG: Scalable Vector Graphics
required alignment value and an optional "meet or slice" reference as described below: alignment value the alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the viewbox doesn't match the aspect ratio of the viewport. the alignment value must be one of the following keywords: none do not force uniform scaling. scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle. note that if <align> is none, then the optional <meetorslice> value is ignored. xminymin - force uniform scaling. align the <min-x> of the element's viewbox with the smallest x value of the viewport. align the <min-y> of the element's viewbox wit...
...e of the viewport. xmaxymax - force uniform scaling. align the <min-x>+<width> of the element's viewbox with the maximum x value of the viewport. align the <min-y>+<height> of the element's viewbox with the maximum y value of the viewport. ...
... the viewport. align the <min-y>+<height> of the element's viewbox with the maximum y value of the viewport. ...
...And 2 more matches

Building up a basic demo with the PlayCanvas engine - Game development
e cone entity. here's how it should look right now: this works, but it is a bit boring. in a game something is usually happening — we can see animations and such — so let's try to breathe a little life into those shapes by animating them. animation we already used translate or rotate to adjust the position of the shapes; we could also change their positions directly with setposition, or scale them. to show actual animation, we need to make changes to these values inside the rendering loop, so they are updated on every frame. there's a special update event that we can use for that — add the following code just below the previous additions: var timer = 0; app.on("update", function (deltatime) { timer += deltatime; // code executed on every frame }); the callback takes the d...
...f rotation on each frame. add this line of code inside the app.on("update") callback function, right after the addition of the deltatime to the timer variable: box.rotate(deltatime*10, deltatime*20, deltatime*30); it will rotate the box by deltatime*10 on the x axis, deltatime*20 on the y axis and deltatime*30 on the z axis, on very frame — giving us a smooth animation. ...
...pdate") callback function, right after the addition of the deltatime to the timer variable: box.rotate(deltatime*10, deltatime*20, deltatime*30); it will rotate the box by deltatime*10 on the x axis, deltatime*20 on the y axis and deltatime*30 on the z axis, on very frame — giving us a smooth animation. scaling we can also scale a given object — there's a function for that called setlocalscale. ...
...to the timer variable: box.rotate(deltatime*10, deltatime*20, deltatime*30); it will rotate the box by deltatime*10 on the x axis, deltatime*20 on the y axis and deltatime*30 on the z axis, on very frame — giving us a smooth animation. scaling we can also scale a given object — there's a function for that called setlocalscale. add the following, again into the callback: cylinder.setlocalscale(1, math.abs(math.sin(timer)), 1); here we are using math.sin to scale the cylinder in a cycle, bigger and smaller again. we're wrapping the y scale value in math.abs to pass the absolute values (greater or equal to 0); sin varies between -1 and 0, and for negative values the cylinder scaling can render unexpectedly (in this case it looks black half the time.) now onto the movement part. movin...

Server-side web frameworks - Learn web development
r their own development. the following sections illustrate some points using code fragments taken from real web frameworks. don't be concerned if it doesn't all make sense now; we'll be working you through the code in our framework-specific modules. overview server-side web frameworks (a.k.a. "web application frameworks") are software frameworks that make it easier to write, maintain and scale web applications. they provide tools and libraries that simplify common web development tasks, including routing urls to appropriate handlers, interacting with databases, supporting sessions and user authorization, formatting output (e.g. html, json, xml), and improving security against web attacks. the next section provides a bit more detail about how web frameworks can ease web application dev...
... can be implemented in your code or in the server (see reverse proxy). web frameworks will have different levels of support for defining what content can be cached. scalability: once your website is fantastically successful you will exhaust the benefits of caching and even reach the limits of vertical scaling (running your web application on more powerful hardware). at this point you may need to scale horizontally (share the load by distributing your site across a number of web servers and databases) or scale "geographically" because some of your customers are based a long way away from your server. the web framework you choose can make a big difference on how easy it is to scale your site. web security: some web frameworks provide better support for handling common web attacks. django for ex...
...abase agnostic schema migrations. robust background job processing. real-time event broadcasting. laravel is accessible, yet powerful, providing tools needed for large, robust applications. asp.net asp.net is an open source web framework developed by microsoft for building modern web applications and services. with asp.net you can quickly create web sites based on html, css, and javascript, scale them for use by millions of users and easily add more complex capabilities like web apis, forms over data, or real time communications. one of the differentiators for asp.net is that it is built on the common language runtime (clr), allowing programmers to write asp.net code using any supported .net language (c#, visual basic, etc.). like many microsoft products it benefits from excellent tools ...
...e web development using java. although definitely not the only framework based on java it is easy to use to create stand-alone, production-grade spring-based applications that you can "just run". it is an opinionated view of the spring platform and third-party libraries but allows to start with minimum fuss and configuration. it can be used for small problems but its strength is building larger scale applications that use a cloud approach. usually multiple applications run in parallel talking to each other, with some providing user interaction and others doing back end work (e.g. accessing databases or other services). load balancers help to ensure redundancy and reliability or allow geolocated handling of user requests to ensure responsiveness. summary this article has shown that web fram...

Mozilla’s UAAG evaluation report
windows 2000, as of february 20, 2002. we are claiming to support html 4, css 2, png, jpg and gif. this evaluation does not cover mailnews or composer. there may be accessibility and customizability features not listed here. a very good resource is the customizing document. when filing mozilla bugs based on uaag requirements, please use bug 24413 as the uaag meta bug. ...
..., css 2, png, jpg and gif. this evaluation does not cover mailnews or composer. there may be accessibility and customizability features not listed here. a very good resource is the customizing document. when filing mozilla bugs based on uaag requirements, please use bug 24413 as the uaag meta bug. checkpoint information (same scaled used on w3c's uaag implementation reports pages) rating scale c: complete implementation vg: very good implementation, almost all requirements satisfied g: good implementation, most important requirements satisfied p: poor implementation, some requirements satisfied and/or difficult for user to access feature ni: not implemented nr: not rated na: not applicable document under construction guideline 1. suppor...
...nologies 6.7 api character encodings. (p1) ? we use 16 bit strings, not sure about utf-16 6.8 dom css access. (p2) g the dom is available in-process, but not via an out-of-process (com) interface. out-of-process access is needed for it to be truly useful for assistive technology 6.9 timely access. (p2) nr too vague to measure. rating scale c: complete implementation vg: very good implementation, almost all requirements satisfied g: good implementation, most important requirements satisfied p: poor implementation, some requirements satisfied and/or difficult for user to access feature ni: not implemented nr: not rated na: not applicable guideline 7. observe operating environment conv...
...ccessibility features. (p1) ni no end user accessibility documentation yet 12.3 document default bindings. (p1) ni no end user accessibility documentation yet 12.4 document changes. (p2) ni no end user accessibility documentation yet 12.5 dedicated section on accessibility. ...

Firefox UI considerations for web developers
the page's <head> element; if an svg icon is available, that icon is selected. otherwise, bitmapped icons which are at least 96 pixels wide are considered. if one is found to have a width of exactly 96 pixels, it is used. otherwise, the smallest image larger than 96 pixels wide is selected. if no high-resolution icon is found, a screenshot is taken of the site; this screenshot is then scaled and cropped to fit in the space allotted to the icon. if the site also has a favicon, it may be overlaid in the corner of the image. the selected image is then presented within the top sites list. rich icons the high resolution icons—also known as rich icons—are specified by setting the rel attribute to one of: apple-touch-icon apple-touch-icon-precomposed fluid-icon the size...
... apple-touch-icon apple-touch-icon-precomposed fluid-icon the size of each icon is taken from the size attribute specified on the <link>, if it's provided. apple-touch-icon and apple-touch-icon-precomposed icons with no size attribute are assumed to be the standard classic iphone size of 57x57 pixels. the icon closest in size to 96 pixels is selected. firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller sizes. providing a top sites ready icon the simple rule is to provide an icon which is at least 96x96 pixels in size, using a <link> element whose rel attribute is a reference to a file containing an icon of a supported type. <link rel="apple-touch-icon" sizes="128x128" href="touch-icon-128x128.png"> <link rel="ap...
...this discussion is based on the site designs as of early january, 2019). usa today the only icon provided by usa today is its classic favicon: <link rel="shortcut icon" href="https://www.gannett-cdn.com/sites/usatoday/images/favicon.png"> since no rich icon is available, firefox creates a screenshot of the home page rendered 560 pixels wide. the screenshot is then drawn in the icon box, which scales and crops the image as needed to fit. the favicon is rendered in a small box in the lower-right corner of the icon box to further identify the site. hootsuite the html on hootsuite's site looks roughly like this: <link rel="shortcut icon" href="/dist/images/icons/favicon.ico"> <link rel="apple-touch-icon-precomposed" href="/dist/images/icons/apple-touch-icon.png"> <link rel="apple-touch-icon-...
...es/icons/apple-touch-icon@2x.png"> firefox starts by looking for an svg icon; there is none. so it then goes on to look through the rich icons. here, there are three of them, each specified as apple-touch-icon-precomposed. since none of them are 96 pixels wide, the smallest icon which is at least 96 pixels wide is chosen; that's the 114x114 pixel apple-touch-icon@2x.png file. that image is then scaled down to be 96 pixels wide and is used in the user interface as seen in the example. ...

GlobalEventHandlers.onwheel - Web APIs
otates the mouse (or other pointing device) wheel. note: don't confuse onwheel with onscroll: onwheel handles general wheel rotation, while onscroll handles scrolling of an object's content. syntax target.onwheel = functionref; value functionref is a function name or a function expression. the function receives a wheelevent object as its sole argument. ...
...l with onscroll: onwheel handles general wheel rotation, while onscroll handles scrolling of an object's content. syntax target.onwheel = functionref; value functionref is a function name or a function expression. the function receives a wheelevent object as its sole argument. examples this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
...nting device) wheel. ...
...el.</div> css body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; result specification specification status comment html living standardthe definition of 'onwheel' in that specification...

Accessibility: What users can do to browse more safely - Accessibility
value back to "normal" use browser extensions gif blocker for chrome, gif blocker is an extension available at the web store. gif scrubber gif scrubber is a chrome extension that allows you to control gifs like a video player. there is a github repository for it at https://github.com/0ui/gif-scrubber beeline reader beeline reader has a browser extension that allows you to set up for grayscale and dyslexi font, among other things take advantage operating system accessibility features most operating systems such as windows 10, have accessibility options that are surprisingly powerful. usually they are quite easy to find by simply typing ( or saying) in the word, "accessibility" in the search finder of the operating system. turn off animations in the operating system in the window...
...are quite easy to find by simply typing ( or saying) in the word, "accessibility" in the search finder of the operating system. turn off animations in the operating system in the windows10 operating system, the user has an ability to turn off animations. this will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings.. grayscale those who have sufferred traumatic brain injury (tbi) may be highly sensitive to color; it can require such a great "investment of cognitive energy" on their part, there's no energy for other daily tasks. enabling grayscale presentation of the content reduces the cognitive workload. it may assist users with other disabilities, as well. an interesting discussion by users on the benefits of using...
...se who have sufferred traumatic brain injury (tbi) may be highly sensitive to color; it can require such a great "investment of cognitive energy" on their part, there's no energy for other daily tasks. enabling grayscale presentation of the content reduces the cognitive workload. it may assist users with other disabilities, as well. an interesting discussion by users on the benefits of using grayscale may be found in the discussion thread, "what is the “grayscale” setting for in accessibility options?". of particular interest is a user who has photosensitive epilepsy, and uses it when feeling "seizure-y". most operating systems have a way to let the user make an adjustment on the workstation. in the screenshot below, you can see an example of windows 10 accessibility settings allowing...
... "what is the “grayscale” setting for in accessibility options?". of particular interest is a user who has photosensitive epilepsy, and uses it when feeling "seizure-y". most operating systems have a way to let the user make an adjustment on the workstation. in the screenshot below, you can see an example of windows 10 accessibility settings allowing for color filters to be selected. grayscale is enabled when the color filters button is toggled "on" see also accessibilty accessibility learning path web accessibility for seizures and physical reactions color blindness discussion: "what is the “grayscale” setting for in accessibility options?" contributors many, many thanks to eric eggert from knowbility; for his discussions and huge help on this topic. ...

Resizing background images with background-size - CSS: Cascading Style Sheets
tiling a large image let's consider a large image, a 2982x2808 firefox logo image. we want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300x300-pixel element. to do this, we can use a fixed background-size value of 150 pixels. ...
... special values: "contain" and "...
...634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background. here we scale a 32x32 pixel favicon to 300x300 pixels: .square2 { background-image: url(favicon.png); background-size: 300px; width: 300px; height: 300px; border: 2px solid; text-shadow: white 0px 0px 2px; font-size: 16px; } as you can see, the css is actually essentially identical, save the name of the image file. special values: "contain" and "cover" besides <length> values, the backgrou...
...16px; } as you can see, the css is actually essentially identical, save the name of the image file. special values: "contain" and "cover" besides <length> values, the background-size css property offers two special size values, contain and cover. let's take a look at these. contain the contain value specifies that, regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container. try resizing the example below to see this in action. html <div class="bgsizecontain"> <p>try resizing this element!</p> </div> css .bgsizecontain { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: con...

Cubic Bezier Generator - CSS: Cascading Style Sheets
width: 40px; } function updatecanvas() { var x1 = document.getelementbyid('x1').value; var y1 = document.getelementbyid('y1').value; var x2 = document.getelementbyid('x2').value; var y2 = document.getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } const radius = 4; // place needed to draw the rulers const rulers = 30.5; const margin = 10.5; const basic_scale_size = 5; // size of 0.1 tick on the rulers var scaling; //limitation: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated var dragsm = 0; // drag state machine: 0 = nodrag, others = object being dragged function initcanvas() { // get the canvas element using the dom var canvas = document.getelementbyid('bezier'); // make sure we don't execute whe...
...getcontext('2d'); // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // draw the rulers ctx.beginpath(); ctx.strokestyle = "black"; // draw the y axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(1), cy(0)); ctx.textalign = "right"; for (var i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(-basic_scale_size + cx(0), ly(i)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(-2 * basic_scale_size + cx(0), ly(i)); ctx.filltext(math.round(i * 10) / 10, -3 * basic_scale_size + cx(0), cy(i) + 4); // limitation the constant 4 should be font size dependant } ctx.lineto(cx(0), ly(i)); } ctx.stroke(); ctx.
... + 4); // limitation the constant 4 should be font size dependant } ctx.lineto(cx(0), ly(i)); } ctx.stroke(); ctx.closepath(); ctx.beginpath(); // draw the y axis label ctx.save(); ctx.rotate(-math.pi / 2); ctx.textalign = "left"; ctx.filltext("output (value ratio)", -cy(0), -3 * basic_scale_size + cx(0)); ctx.restore(); // draw the x axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(0), cy(1)); ctx.textalign = "center"; for (i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(lx(i), basic_scale_size + cy(0)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(lx(i), 2 * basic_scale_size + cy(0)); ctx.f...
... draw the x axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(0), cy(1)); ctx.textalign = "center"; for (i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(lx(i), basic_scale_size + cy(0)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(lx(i), 2 * basic_scale_size + cy(0)); ctx.filltext(math.round(i * 10) / 10, cx(i), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size } ctx.lineto(lx(i), cy(0)); } // draw the x axis label ctx.textalign = "left"; ctx.filltext("input (time duration ratio)", cx(0), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size ct...

DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
multiple video files. for example: the file in.video can be any container with at least one audio and one video stream that can be decoded by ffmpeg, create the audio using: ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm create each video variant. ...
...g: ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm create each video variant. ...
...ns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_15...
...n -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm or do it in all in one command. ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \ -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \ -an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \ -an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \ -an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \ -an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm 2. create the manifest file: ffmpeg \ -f webm_dash_manifest -i video_160x90_2...

Standard metadata names - HTML: Hypertext Markup Language
value possible subvalues description width a positive integer number, or the text device-width defines the pixel width of the viewport that you want the web site to be rendered at. height a positive integer, or the text device-height defines the height of the viewport. not used by any browser. initial-scale a positive number between 0.0 and 10.0 defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size. maximum-scale a positive number between 0.0 and 10.0 defines the maximum amount to zoom in. it must be greater or equal to the minimum-scale or the behaviour is undefined. browser settings can...
...browser settings can ignore this rule and ios10+ ignores it by default. ...
...browser settings can ignore this rule and ios10+ ignores it by default. user-scalable yes or no if set to no, the user is not able to zoom in the webpage. the default is yes. browser settings can ignore this rule, and ios10+ ignores it by default. ...
...r-scalable yes or no if set to no, the user is not able to zoom in the webpage. the default is yes. browser settings can ignore this rule, and ios10+ ignores it by default. viewport-fit auto, contain or cover the auto value doesn’t affect the initial layout viewport, and the whole web page is viewable. the contain value means that the viewport is scaled to fit the largest rectangle inscribed within the display. the cover value means that the viewport is scaled to fill the device display. it is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display. notes: though unstandardized, this declaration is respected by most mobile browsers due...

vector-effect - SVG: Scalable Vector Graphics
coordinate system and filling that outline with the stroke paint (color or gradient). the resulting visual effect of this value is that the stroke width is not dependant on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level. non-scaling-size this value specifies a special user coordinate system used by the element and its descendants. the scale of that user coordinate system does not change in spite of any transformation changes from a host coordinate space. however, it does not specify the suppression of rotation and skew. also, it does not specify the origin of the user coordinate system. since this value suppresses scaling of the user coordinate system, it also has the characteristics of non-scaling-stroke. non-rotation this value ...
.... however, it does not specify the suppression of rotation, skew and scaling. when this vector effect and the transform property are defined at the same time, that property is consumed for this effect. ...
... of rotation, skew and scaling. when this vector effect and the transform property are defined at the same time, that property is consumed for this effect. ...
... candidate recommendation initial definition ...

Patterns - SVG: Scalable Vector Graphics
lso x and y attributes available if you want to offset the start point of this rectangle somewhere within your drawing. the reason they've been used here is described below. as with the gradientunits attribute used above, patterns also have an attribute, patternunits, which specifies the units that these attributes will take. it defaults to "objectboundingbox" as it did above, so a value of 1 is scaled to the width/height of the object you're applying the pattern to. since, in this case, we wanted the pattern to repeat 4 times horizontally and vertically, the height and width are set to 0.25. this means the pattern's width/height is only 0.25 of the total box size. unlike gradients, patterns have a second attribute, patterncontentunits, which describes the units system used inside the pattern...
...d the circle inside the pattern were then sized to fit in a 50×50 box. anything we had drawn outside that box wouldn't have been shown. the pattern also had to be offset by 10 pixels so that it would start in the upper-left corner of our box, so the x and y attributes of the pattern had to be adjusted to 10÷200 = 0.05. the caveat here is that if the object changes size, the pattern itself will scale to fit it, but the objects inside will not. so while we would still have 4 repeating units inside the pattern, the objects composing that pattern would remain the same size, and you end up with large areas of nothing in between them. by changing the patterncontentunits attribute, we can put all the elements into the same unit system: <pattern id="pattern" width=".25" height=".25" patterncontent...
...this contrasts with the "userspaceonuse" system, where if the object changes the size, the pattern would stay the same and just repeat itself more times to fill the box. as a slight aside, in gecko circles seem to have trouble drawing if their radius is set to something less than 0.075 (it is currently unknown whether this is a bug...
...all three of the preceding examples are shown below on a rectangle that has been slightly elongated to a height of 300px, but i should note that it's not an exhaustive picture, and there are other options available depending on your application. « previousnext » ...

Bounding volume collision detection with THREE.js - Game development
call geometry.computeboundingbox beforehand. var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); knot.geometry.computeboundingbox(); var knotbbox = new box3( knot.geometry.boundingbox.min, knot.geometry.boundingbox.max); note: the boundingbox property takes the geometry itself as reference, and not the mesh. so any transformations such as scale, position, etc. applied to the mesh will be ignored while computing the calculating box. a more simple alternative that fixes the previous issue is to set those boundaries later on with box3.setfromobject, which will compute the dimensions taking into account a 3d entity's transformations and any child meshes as well. var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new me...
...ot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); var knotbsphere = new sphere( knot.position, knot.geometry.boundingsphere.radius); unfortunately, there is no equivalent of box3.setfromobject for sphere instances. so if we apply transformations or change the position of the mesh, we need to manually update the bounding sphere. for instance: knot.scale.set(2, 2, 2); knotbsphere.radius = knot.geometry.radius * 2; intersection tests point vs. box3 / sphere both box3 and sphere have a containspoint method to do this test. var point = new three.vector3(2, 4, 7); knotbbox.containspoint(point); box3 vs. box3 the box3.intersectsbox method is available for performing this test. knotbbox.intersectsbox(otherbox); note: this is different from th...
...three.torusknotgeometry(0.5, 0.1), new three.meshnormalmaterial({}) ); var knotboxhelper = new three.boxhelper(knot, 0x00ff00); scene.add(knotboxhelper); in order to also have our actual box3 bounding box, we create a new box3 object and make it assume the boxhelper's shape and position. var box3 = new three.box3(); box3.setfromobject(knotboxhelper); if we change the mesh position, rotation, scale, etc. we need to call the update() method so the boxhelper instance matches its linked mesh. we also need to call setfromobject again in order to make the box3 follow the mesh. knot.position.set(-3, 2, 1); knot.rotation.x = -math.pi / 4; // update the bounding box so it stills wraps the knot knotboxhelper.update(); box3.setfromobject(knotboxhelper); performing collision tests is done in the sam...

Building up a basic demo with A-Frame - Game development
necesary vr hardware set up and ready. specifying a camera a camera entity can be created by adding an <a-camera> element to the scene. we can set the position of the camera explicitly and move it back a little bit from the center of the scene, so we'll be able to see the shapes. add this just before the closing </a-scene> element: <a-camera position="0 1 4" cursor-visible="true" cursor-scale="2" cursor-color="#0095dd" cursor-opacity="0.5"> </a-camera> we've also defined a cursor for the given camera, using the cursor-* attributes (by default it is invisible.) — we've set its scale so it will more easily visible, its color, and some opacity so it won't completely covering the objects behind it. adding lights the basic light types in a-frame are directional and ambient. the f...
...tes: color, height, radius and position. the last line adds the newly created cylinder to the scene. that's it — you've created three different shapes with a-frame! here's how it looks right now: it is impressive to be able to create such a scene with just a few lines of html and javascript. animation we've already used rotation and position to move the shapes on the scene, and we can also scale them. these attributes can be manipulated to create the illusion of animation. rotation there's a special <a-animation> entity that can help us animate elements. add the <a-animation> element seen below to the <a-box> element as a child, as shown: <a-box color="#0095dd" rotation="20 40 0" position="0 1 0"> <a-animation attribute="rotation" from="20 0 0" to="20 360 0" di...
...lso add animation to entities with custom geometry like the torus, in much the same way. add the following <a-animation> element to your torus: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" material=" color: #eaeff2; roughness: 0.1; metalness: 0.5;" rotation="10 0 0" position="-3 1 0"> <a-animation attribute="scale" to="1 0.5 1" direction="alternate" dur="2000" repeat="indefinite" easing="linear"> </a-animation> </a-entity> the attribute we want to animate for the torus is scale. the initial, default scale is 1 1 1, and we're going to animate it to 1 0.5 1, so the y axis will be scaled from 1 to 0.5. the easing we're going to use is linear. by setting the direction to alternate the s...

Building up a basic demo with PlayCanvas editor - Game development
colored material to the shape by clicking and dragging its icon from the bottom part of the screen (the little dot on the left hand side of the material's name — it can be a bit fiddly to select; just persevere) onto the box on the scene. so, at this point we've created a blue box. click on the box to bring up its entity sidebar — you'll see options for changing its position, rotation, and scale. try applying the rotation values x: 10 and y: 20. now click on the play arrow in the top right corner of the scene to launch and render the scene — it will be opened in a separate browser tab. this looks great! let's add more shapes to the scene to make it look more interesting. adding more shapes to make way for more shapes, move the box to the left to make some room for the next sh...
...e screen you can see the list of scripts available — for now there's only boxanimation.js — clicking it will add the animation script to the box object. the cylinder now we'll do the same steps for cylinder. first: create a new script asset. name it cylinderanimation.js. double click the script icon to launch the code editor. this time instead of rotating the object we will try to scale it. for that we'll need a timer to store the total amount of time passed since the start of the animation. add this code to the initialize() function: this.timer = 0; and those two lines to the update() function: this.timer += dt; this.entity.setlocalscale(1, math.abs(math.sin(this.timer)), 1); the setlocalscale() method applies the given values to the x, y and z axes of the object. in our ca...
...d a timer to store the total amount of time passed since the start of the animation. add this code to the initialize() function: this.timer = 0; and those two lines to the update() function: this.timer += dt; this.entity.setlocalscale(1, math.abs(math.sin(this.timer)), 1); the setlocalscale() method applies the given values to the x, y and z axes of the object. in our case we're modifying the scale of the cylinder on the y axis, giving it as a value the math.sin() of the timer, with math.abs() applied to the result of that to have the values always above zero (0-1; sin values are normally between -1 and 1.) this gives us a nice scaling effect as a result. remember to add the cylinderanimation.js file to the cylinder object to apply the given animations. the cone time to play with the las...

Building up a basic demo with Three.js - Game development
of lights, like ambient, directional, hemisphere, or spot. experiment placing them on our scene, to see how they affect it. this looks a little boring though. in a game, something is usually happening. we might see animations and such. so let's try breathing a little life into these shapes, by animating them! animation we already used rotation, to adjust the position of the cube. we can also scale the shapes, or change their positions. to show animation, we need to make changes to these values inside the render loop, so they update on each frame. rotation rotating is straighforward. you add a value to a given direction of rotation on each frame. add this line of code, right after the requestanimationframe() invocation inside the render function: cube.rotation.y += 0.01; this rotates t...
...values inside the render loop, so they update on each frame. rotation rotating is straighforward. you add a value to a given direction of rotation on each frame. add this line of code, right after the requestanimationframe() invocation inside the render function: cube.rotation.y += 0.01; this rotates the cube on every frame, by a tiny bit, so the animation looks smooth. scaling we can also scale an object. applying a constant value, we would make it grow, or shrink just once. let's make things more interesting. first, we implement a helper variable, called t, for counting elapsed time. add it right before the render() function: var t = 0; now let's increase the value by a given constant value, on each frame of the animation. add the following lines, just below the requestanimationfram...
...lue, we would make it grow, or shrink just once. let's make things more interesting. first, we implement a helper variable, called t, for counting elapsed time. add it right before the render() function: var t = 0; now let's increase the value by a given constant value, on each frame of the animation. add the following lines, just below the requestanimationframe() invocation: t += 0.01; torus.scale.y = math.abs(math.sin(t)); we use math.sin, ending up with quite an interesting result. this scales the torus, repeating the process, as sin is a periodic function. we're wrapping the scale value in math.abs, to pass the absolute values, greater or equal to 0. as sin is between -1 and 1, negative values might render out torus in unexpected way. in this case it looks black half the time. now, ...

Crisp pixel art look with image-rendering - Game development
r game jam entries. but since today's screens render content at high resolutions, there is a problem with making sure the pixel art does not look blurry. developers have been manually scaling up graphics so they are shown with blocks that represent pixels. two downsides to this method are larger file sizes and compression artifacts. original size 4x size 4x size (scaled with an image editor) none vendor's algorithm nearest-neighbor algorithm a css-based solution the good news is that you can use css to automatically do the up-scaling, which not only solves the blur problem, but also allows you to use the images in their original, smaller size, thus saving download time. also, some game techniques require algorithms that analyse images, wh...
...there is partial support in most browsers. the steps to achieve this effect are: create a <canvas> element and set its width and height attributes to the original, smaller resolution. set its css width and height properties to be 2x or 4x the value of the html width and height. if the canvas was created with a 128 pixel width, for example, we would set the css width to 512px if we wanted a 4x scale. ...
...anted a 4x scale. set the <canvas> element's image-rendering css property to some value that does not make the image blurry. either crisp-edges or pixelated will work. check out the image-rendering article for more information on the differences between these values, and which prefixes to use depending on the browser. an example let's have a look at an example. ...

Animations and tweens - Game development
ter. tweens whereas animations play external sprites sequentially, tweens smoothly animate properties of an object in the gameworld, such as width or opacity. let's add a tween to our game to make the bricks smoothly disappear when they are hit by the ball. ...
...ltween.to({x:0,y:0}, 200, phaser.easing.linear.none); killtween.oncomplete.addonce(function(){ brick.kill(); }, this); killtween.start(); let's walk through this so you can see what's happening here: when defining a new tween you have to specify which property will be tweened — in our case, instead of hiding the bricks instantly when hit by the ball, we will make their width and height scale to zero, so they will nicely disappear. to the end, we use the add.tween() method, specifying brick.scale as the argument as this is what we want to tween. the to() method defines the state of the object at the end of the tween. it takes an object containing the chosen parameter's desired ending values (scale takes a scale value, 1 being 100% of size, 0 being 0% of size, etc.), the time of the t...
...tc.), the time of the tween in milliseconds and the type of easing to use for the tween. we will also add the optional oncomplete event handler, which defines a function to be executed when the tween finishes. the last thing do to is to start the tween right away using start(). that's the expanded version of the tween definition, but we can also use the shorthand syntax: game.add.tween(brick.scale).to({x:2,y:2}, 500, phaser.easing.elastic.out, true, 100); this tween will double the brick's scale in half a second using elastic easing, will start automatically, and have a delay of 100 miliseconds. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps animations and tweens look very nice...

2D maze game with device orientation - Game development
though the content of those states. boot.js the boot state is the first one in the game. ...
...h the content of those states. boot.js the boot state is the first one in the game. var ball = { _width: 320, _height: 480 }; ball.boot = function(game) {}; ball.boot.prototype = { preload: function() { this.load.image('preloaderbg', 'img/loading-bg.png'); this.load.image('preloaderbar', 'img/loading-bar.png'); }, create: function() { this.game.scale.scalemode = phaser.scalemanager.show_all; this.game.scale.pagealignhorizontally = true; this.game.scale.pagealignvertically = true; this.game.state.start('preloader'); } }; the main ball object is defined and we're adding two variables called _width and _height that are the width and the height of the game canvas — they will help us position the elements on the screen. we...
... check out its source code on github. html5 gives us raw tools, the frameworks built on top of it are getting faster and better, so now is a great time get into web game development. in this tutorial we used phaser, but there are a number of other frameworks worth considering too like impactjs, construct 2 or playcanvas — it depends on your preferences, coding skills (or lack thereof), project scale, requirements and other aspects. you should check them all out and decide which one suits your needs best. ...

UI pseudo-classes - Learn web development
picked up by assistive technologies. ...
...having a purely visual indicator solves this problem. note: this also shows how you ca...
...self. we saw examples of this in the previous article when we talked about using appearence: none on radios/checkboxes. as a recap, the :checked code from our styled radio buttons example looks like so: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } you can try it out here: basically, we build the styling for the radio button "inner circle" using the ::before pseudo element, but set a scale(0) transform on it. we then use a transitio...

Styling Vue components with CSS - Learn web development
the reset styles should be applied to ...
...hem from colliding globally. ...
...eckbox-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; font-size: 1rem; line-height: 1.25; color: #0b0c0c; display: block; margin-bottom: 5px; } .custom-checkbox > .checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; font-size: 1rem; line-height: 1.25; box-sizing: border-box; width: 100%; height: 40px; height: 2.5rem; margin-top: 0; padding: 5px; border: 2px solid #0b0c0c; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-checkbox > input:focus { outline: 3px dashed #fd0; outline-offset: 0; box...

CanvasRenderingContext2D.drawImage() - Web APIs
to the destination context. dx the x-axis coordinate in the destination canvas at which to place the top-left corner of the source image. dy the y-axis coordinate in the destination canvas at which to place the top-left corner of the source image. dwidth optional the width to draw the image in the destination canvas. this allows scaling of the drawn image. if not specified, the image is not scaled in width when drawn. dheight optional the height to draw the image in the destination canvas. this allows scaling of the drawn image. if not specified, the image is not scaled in height when drawn. exceptions thrown index_size_err if the canvas or source rectangle width or height is zero. invalid_state_err the image has no image data. type_mismatch_err the specified source element is...
...04, 124, 21, 20, 87, 104); }); result understanding source element size the drawimage() method uses the source element's intrinsic size in css pixels when drawing. for example, if you load an image and specify the optional size parameters in its constructor, you will have to use the naturalwidth and naturalheight properties of the created instance to properly calculate things like crop and scale regions, rather than element.width and element.height. the same goes for videowidth and videoheight if the element is a <video> element, and so on. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = new image(60, 45); // using optional size for image image.onload = drawimageactualsize; // draw whe...
... living standard ...

DOMMatrix() - Web APIs
x4 matrices, suitable for 2d and 3d operations.. syntax var dommatrix = new dommatrix([init]) parameters init optional a string containing a sequence of numbers or an array of numbers specifying the matrix you want to create, or a css transform string. example this example creates a dommatrix to use as an argument for calling point.matrixtransform(). ...
...table for 2d and 3d operations.. syntax var dommatrix = new dommatrix([init]) parameters init optional a string containing a sequence of numbers or an array of numbers specifying the matrix you want to create, or a css transform string. example this example creates a dommatrix to use as an argument for calling point.matrixtransform(). ...
...ng a sequence of numbers or an array of numbers specifying the matrix you want to create, or a css transform string. example this example creates a dommatrix to use as an argument for calling point.matrixtransform(). var point = new dompoint(5, 4); var scalex = 2; var scaley = 3; var translatex = 12; var translatey = 8; var angle = math.pi / 2; var matrix = new dommatrix([ math.sin(angle) * scalex, math.cos(angle) * scalex, -math.sin(angle) * scaley, math.cos(angle) * scaley, translatex, translatey ]); var transformedpoint = point.matrixtransform(matrix); specifications specification status comment geometry interfaces module level 1the definition of 'dommatrix' in that specification. candidate recommendation initial definition. ...

DOMMatrixReadOnly - Web APIs
. dommatrixreadonly.rotate() returns a new dommatrix created by rotating the source matrix around each of its axes by the specified number of degrees. the original matrix is not altered. dommatrixreadonly.rotatefromvector() returns a new dommatrix created by rotating the source matrix by the angle between the specified vector and (1, 0). the original matrix is not modified. ...
... is not altered. dommatrixreadonly.rotatefromvector() returns a new dommatrix created by rotating the source matrix by the angle between the specified vector and (1, 0). the original matrix is not modified. dommatrixreadonly.scale() returns a new dommatrix created by scaling the source matrix by the amount specified for each axis, centered on the given origin. by default, the x and z axes are scaled by 1 and the y axis has no default scaling value. the default origin is (0, 0, 0). the original matrix is not modified. ...
...cified vector and (1, 0). the original matrix is not modified. dommatrixreadonly.scale() returns a new dommatrix created by scaling the source matrix by the amount specified for each axis, centered on the given origin. by default, the x and z axes are scaled by 1 and the y axis has no default scaling value. the default origin is (0, 0, 0). the original matrix is not modified. dommatrixreadonly.scale3d() returns a new dommatrix created by scaling the source 3d matrix by the given factor along all its axes, centered on the specified origin point. the default origin is (0, 0, 0). the original matrix is not modified. dommatrixreadonly.scalenonuniform() returns a new dommatrix created by applying the specified scaling on the x, y, and z axes, centered at the given origin. by default, the y a...

SVGSVGElement - Web APIs
if "magnification" is enabled (i.e., zoomandpan=...
...if "magnification" is enabled (i.e., zoomandpan="magnify"), then the effect is as if an extra transformation were placed at the o...
...wbox, preserveaspectratio, zoomandpan, transform and viewtarget within currentview will correspond to the values from the svg view specification fragment identifier svgsvgelement.currentscale on an outermost <svg> element, this float attribute indicates the current scale factor relative to the initial view to take into account user magnification and panning operations. dom attributes currentscale and currenttranslate are equivalent to the 2×3 matrix [a b c d e f] = [currentscale 0 0 currentscale currenttranslate.x currenttranslate.y]. if "magnification" is enabled (i.e., zoomandpan="magnify"), then the effect is as if an extra transformation were placed at the outermost level on the svg document fragment (i.e., outside the outermost <svg> element). svgsvgelement.currenttranslate read on...

VisualViewport - Web APIs
origin of the top edge in css pixels. visualviewport.pagetop read only returns the y coordinate of the visual viewport relative to the initial containing block origin of the top edge in css pixels. visualviewport.width read only returns the width of the visual viewport in css pixels. visualviewport.height read only returns the height of the visual viewport in css pixels. visualviewport.scale read only returns the pinch-zoom scaling factor applied to the visual viewport. events listen to these events using addeventlistener() or by assigning an event listener to the relevant oneventname property of this interface. resize fired when the visual viewport is resized. also available via the visualviewport.onresize property. scroll fired when the visual viewport is scrolled. als...
...ual viewport readme, shows how to write a simple bit of code that will hide an overlaid box (which might contain an advert, say) when the user zooms in. this is a nice way to improve the user experience when zooming in on pages. a live sample is also available. var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function resizehandler() { if (viewport.scale > 1.3) bottombar.style.display = "none"; else bottombar.style.display = "block"; } window.visualviewport.addeventlistener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport. a live sample is also available. va...
...top = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling. specifications specification status comment visual vie...

Web Accessibility: Understanding Colors and Luminance - Accessibility
y by our brains. human physiology and psychology are affected by the color "red" generally speaking, in ways different from that of other colors. we respond physiologically as well as psychologically to colors. for example, it has been demonstrated that some colors are more likely to cause epileptic fits than others; there is an interesting observation in a discussion thread, "what is the “grayscale” setting for in accessibility options?" in which one of the participants states: "i have photo-triggered ocular migraines and wish everything had a greyscale option. even better a red or violet scale, but that is probably very specific to me." red desaturation tests the human eye is so sensitively "tuned" to red, that opthamolegists set up a test using it. the red desaturation test assesse...
...es color exploring the rgb color space further, as it is the color space used by the data type <color>, note that there are actually multiple "versions" of the rgb color space, such as srgb, scrgb, and rgba. there are also different ways to refrence rgb: rgb decimal reference: 153, 0, 0 and an rgb percent reference: 60, 0, 0. window.getcomputedstyle() returns values using rgb decimal reference scale. for example, calling window.getcomputedstyle() on a div with a background-color: #990000; set returns the computed background color as rgb(153, 0, 0) -- the rgb decimal reference. window.getcomputedstyle() measures color in terms of rgb. css color module level 3 added hsl color values, stating "css3 adds numerical hue-saturation-lightness (hsl) colors as a complement to numerical rgb colors...
...so, has been referred to as "lightness" luminance and brightness are not the same. brightness is a perception. luminance and lightness are not the same. luminance and reflected light are not the same. see also mdn accessibilty accessibility learning path color <color> web accessibility for seizures and physical reactions color blindness discussions (general) what is the “grayscale” setting for in accessibility options? the color red how the color red influences our behavior scientific american by susana martinez-conde, stephen l. macknik on november 1, 2014 scientific papers photic- and pattern-induced seizures: expert consensus of the epilepsy foundation of america working group w3c issues and discussions contrast ratio math and related visual issues #695...

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
level-indicator div{ color: black; -moz-appearance: rating-level-indicator; -webkit-appearance: rating-level-indicator; } <div>lorem</div> safari relevancy-level-indicator div{ color: black; -moz-appearance: relevancy-level-indicator; -webkit-appearance: relevancy-level-indicator; } <div>lorem</div> safari scale-horizontal div { color: transparent; -moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; } <div>lorem</div> firefox scalethumbend div { color: black; -moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; } <div>lorem</div> firefox scalethumb-horizontal div { ...
...: transparent; -moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; } <div>lorem</div> firefox scalethumbend div { color: black; -moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; } <div>lorem</div> firefox scalethumb-horizontal div { color: transparent; -moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; } <div>lorem</div> firefox scalethumbstart div { color: black; -moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; } <div>lorem</div> firefox scalethumbtick div { color: black; -moz-appearance: scalethumbtick; -webkit-appearance...
...umb-horizontal; -webkit-appearance: scalethumb-horizontal; } <div>lorem</div> firefox scalethumbstart div { color: black; -moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; } <div>lorem</div> firefox scalethumbtick div { color: black; -moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; } <div>lorem</div> firefox scalethumb-vertical div { color: black; -moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; } <div>lorem</div> firefox scale-vertical div { color: transparent; -moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; } <div>l...

<filter-function> - CSS: Cascading Style Sheets
operties. syntax the <filter-function> data type is specified using one of the filter functions listed below. each function requires an argument which, if invalid, results in no filter being applied. blur() blurs the image. brightness() makes the image brighter or darker. contrast() increases or decreases the image's contrast. drop-shadow() applies a drop shadow behind the image. grayscale() converts the image to grayscale. hue-rotate()​​​​​​​​​​​​​​ changes the overall hue of the image. invert() inverts the colors of the image. opacity() makes the image transparent. saturate() super-saturates or desaturates the input image. sepia() converts the image to sepia. examples filter function comparison this example provides a simple graphic, alo...
... the controls updates the filter effect in real time, allowing you to investigate the effects of different filters. ...
...slider.setattribute('data-unit', ''); } else if(filter === 'drop-shadow') { slider.value = 0; slider.min = -20; slider.max = 40; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'opacity') { slider.value = 1; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setattribute('data-unit', ''); } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') { slider.value = 0; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setattribute('data-unit', ''); } else if(filter === 'hue-rotate') { slider.value = 0; slider.min = 0; slider.max = 360; slider.step = 1; slider.setattribute('data-unit', 'deg'); } } function setdiv(filter) { if(filter === 'dro...

image-rendering - CSS: Cascading Style Sheets
the image-rendering css property sets an image scaling algorithm. the property applies to an element itself, to any images set in its other properties, and to its descendants. the user agent will scale an image when the page author specifies dimensions other than its natural size. scaling may also occur due to user interaction (zooming). for example, if the natural size of an image is 100×100px, but its actual dimensions are 200×200px (or 50×50px), then the image will be upscaled (or downscaled) using the algorithm specified by image-rendering. this property has no effect on non-scaled images. syntax /* keyword values */ image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /* global values */ image-rendering: inherit; image-rendering: initial; image-rendering...
...in particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. this is intended for images such as photos. high-quality identical to smooth, but with a preference for higher-quality scaling. ...
...cceptable, such as bilinear interpolation. this is intended for images such as photos. high-quality identical to smooth, but with a preference for higher-quality scaling. if system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree. crisp-edges the image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. suitable algorithms include nearest-neighbor and other non-smoothing scaling algorithms such as 2×sai and hqx-family algorithms. this value is intended for pixel-art images, such as in browser games. pixelated when scaling the image up, the nearest-...

mask-size - CSS: Cascading Style Sheets
e keyword contain using the keyword cover using width and height values to specify a size using width and height, you can supply one or two values: if only one value is given it sets the width, with the height set to auto. if two values are given, the first sets width and the second sets height. each value can be a <length>, a <percentage>, or auto. values <length> a <length> value scales the mask image to the specified length in the corresponding dimension. negative lengths are not allowed. <percentage> a <percentage> value scales the mask image in the corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of mask-origin. the mask positioning area is, by default, the area containing the content of the box and its padd...
...e corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of mask-origin. the mask positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding and content. negative percentages are not allowed. auto a keyword that scales the mask image in the corresponding directions in order to maintain its intrinsic proportion. contain a keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). the image is letterboxed within the container. the image is automatically centered unless over-ridden by another property such as mask-position. cover a keyword that is the inv...
...the image "covers" the entire width or height of the container. when the image and container have different dimensions, the image is clipped either on left/right or at top/bottom. ...

text-rendering - CSS: Cascading Style Sheets
d over legibility and geometric precision when drawing text. it disables kerning and ligatures. optimizelegibility the browser emphasizes legibility over rendering speed and geometric precision. this enables kerning and optional ligatures. geometricprecision the browser emphasizes geometric precision over rendering speed and legibility. ...
... optimizelegibility the browser emphasizes legibility over rendering speed and geometric precision. this enables kerning and optional ligatures. geometricprecision the browser emphasizes geometric precision over rendering speed and legibility. certain aspects of fonts — such as kerning — don't scale linearly. so this value can make text using those fonts look good. in svg, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system. but if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. thi...
...t a font of that computed size from the platform's font system. but if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. this results in stair-step scaling of text. but the geometricprecision property — when fully supported by the rendering engine — lets you scale your text fluidly. for large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by windows or linux. note: webkit precisely applies the specified value, but gecko treats the value the same as optimizelegibility. formal definition initial valueautoapplies totext elementsinher...

matrix3d() - CSS: Cascading Style Sheets
html <div class="foo"> lorem ipsum dolor sit amet, consectetur adipisicing elit. quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse? </div> css html { width: 100%; } body { height: 10...
... html <div class="foo"> lorem ipsum dolor sit amet, consectetur adipisicing elit. ...
... { height: 100vh; /* centering content */ display: flex; flex-flow: row wrap; justify-content: center; align-content: center; } .foo { width: 50%; padding: 1em; color: white; background: #ff8c66; border: 2px dashed black; text-align: center; font-family: system-ui, sans-serif; font-size: 14px; /* setting up animation for better demonstration */ animation: motionscale 2s alternate linear infinite; } @keyframes motionscale { from { /* identity matrix is used as basis here. the matrix below describes the following transformations: translates every x point by -50px translates every y point by -100px translates every z point by 0 scales down by 10% */ transform: matrix3d( 1,0,0,0, 0,1,0,0...

dominant-baseline - SVG: Scalable Vector Graphics
the dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents. it also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context. it is used to determine or re-determine a scaled-baseline-table. a scaled-baseline-table is a compound value with three components: a baseline-identifier for the dominant-baseline, a baseline-table, and a baseline-table font-size. some values of the property re-determine all three values. others only re-establish the baseline-table font-size. when the initial value, auto, would give an undesired result, this property can be used to explicitly set the desired scaled-baseline-table. if there is no baseline table in...
... as those of the parent text content element. if the computed baseline-shift value actually shifts the baseline, then the baseline-table font-size component is set to the value of the font-size attribute on the element on which the dominant-baseline attribute occurs, otherwise the baseline-table font-size remains the same as that of the element. if there is no parent text content element, the scaled-baseline-table value is constructed as above for <text> elements. use-script the dominant-baseline and the baseline-table components are set by determining the predominant script of the character data content. the writing-mode, whether horizontal or vertical, is used to select the appropriate set of baseline-tables and the dominant baseline is used to select the baseline-table that correspo...
...e on the element on which the dominant-baseline attribute occurs. no-change the dominant-baseline, the baseline-table, and the baseline-table font-size remain the same as that of the parent text content element. reset-size the dominant-baseline and the baseline-table remain the same, but the baseline-table font-size is changed to the value of the font-size attribute on this element. this re-scales the baseline-table for the current font-size. ideographic the baseline-identifier for the dominant-baseline is set to be ideographic, the derived baseline-table is constructed using the ideographic baseline-table in the font, and the baseline-table font-size is changed to the value of the font-size attribute on this element. alphabetic the baseline-identifier for the dominant-baseline is set...

transform - SVG: Scalable Vector Graphics
the transform attribute defines a list of transform definitions that are applied to an element and the element's children. html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property. however, be aware that there are some difference in syntax between the css property and the attribute. see the doc...
...ntal translation --> <rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" /> <!-- vertical translation --> <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" /> <!-- both horizontal and vertical translation --> <rect x="5" y="5" width="40" height="40" fill="yellow" transform="translate(50,50)" /> </svg> scale the scale(<x> [<y>]) transform function specifies a scale operation by x and y. if y is not provided, it is assumed to be equal to x. example html,body,svg { height:100% } <svg viewbox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- uniform scale --> <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" /> <!-- vertical scale --> <circle cx="0" cy="0" r...
... specifies a scale operation by x and y. if y is not provided, it is assumed to be equal to x. example html,body,svg { height:100% } <svg viewbox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- uniform scale --> <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" /> <!-- vertical scale --> <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1,4)" /> <!-- horizontal scale --> <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4,1)" /> <!-- no scale --> <circle cx="0" cy="0" r="10" fill="black" /> </svg> rotate the rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. if optional parameters x and y are not supplied, the rotation is about the origin of the current...

<feDisplacementMap> - SVG: Scalable Vector Graphics
the <fedisplacementmap> svg filter primitive uses the pixel values from the image from in2 to spatially displace the image from in. the formula for the transformation looks like this: p'(x,y) ← p( x + scale * (xc(x,y) - 0.5), y + scale * (yc(x,y) - 0.5)) where p(x,y) is the input image, in, and p'(x,y) is the destination. xc(x,y) and yc(x,y) are the component values of the channel designated by xchannelselector and ychannelselector. ...
...xc(x,y) and yc(x,y) are the component values of the channel designated by xchannelselector and ychannelselector. usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in in2 scale xchannelselector ychannelselector dom interface this element implements the svgfedisplacementmapelement interface. example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence"...
...selector dom interface this element implements the svgfedisplacementmapelement interface. example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<fedisplacementmap>' in that specification. working draft no changes scalable vector graphics (svg) 1.1 (s...

widget - Archive of obsolete content
dgets can contain images or arbitrary web content. you can include this content inline as a string by using the content property, or point to content using a url with the contenturl property. upon creation, the widget is automatically added to the add-on bar. you can set the width of a widget, but the height is fixed so as to fit in the add-on bar. if the content is an image, it is automatically scaled to be 16x16 pixels. for example, this widget contains an image, so it looks like a simple icon: require("sdk/widget").widget({ id: "mozilla-icon", label: "my mozilla widget", contenturl: "http://www.mozilla.org/favicon.ico" }); you can make contenturl point to an html or icon file which you have packaged inside your add-on. just save the file in your add-on's data directory, and referen...
...n the browser. this string has to be unique and must not be changed over time. optional options: name type content string an optional string value containing the displayed content of the widget. it may contain html. widgets must have either the content property or the contenturl property set. if the content is an image, it is automatically scaled to be 16x16 pixels. contenturl string an optional string url to content to load into the widget. this can be local content or remote content, an image or web content. widgets must have either the content property or the contenturl property set. if the content is an image, it is automatically scaled to be 16x16 pixels. panel panel an optional p...

Canvas code snippets - Archive of obsolete content
xt = this.ctx = canvas.getcontext('2d'); if (!canvas2dcontext.prototype.arc) { canvas2dcontext.setup.call(this, this.ctx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'put...
...= remotecanvas.canvas_height + 'px'; canvas.width = remotecanvas.canvas_width; canvas.height = remotecanvas.canvas_height; var windowwidth = window.innerwidth - 25; var windowheight = window.innerheight; var ctx = canvas.getcontext('2d'); ctx.clearrect(0, 0, remotecanvas.canvas_width, remotecanvas.canvas_height); ctx.save(); ctx.scale(remotecanvas.canvas_width / windowwidth, remotecanvas.canvas_height / windowheight); ctx.drawwindow(remotewindow, 0, 0, windowwidth, windowheight, 'rgb(255, 255, 255)'); ctx.restore(); }; usage: var remotecanvas = new remotecanvas(); remotecanvas.load(); convert image files to base64 strings the following code ge...

increment - Archive of obsolete content
the default value is 1. ...
...the default value is 1. ...

decrease - Archive of obsolete content
...
... ...

decreasePage - Archive of obsolete content
...
... ...

increase - Archive of obsolete content
...
... ...

increasePage - Archive of obsolete content
...
... ...

XUL Reference - Archive of obsolete content
e image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbar...
...on notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign ...

textbox - Archive of obsolete content
for compatibility, but you should update your code. hidespinbuttons type: boolean if true, the number box does not have arrow buttons next to it to allow the user to adjust the value. the value may still be adjusted with the keyboard. the default value is false. increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). the default value is 1. label type: string if present and not empty, this will be exposed to screen readers through the label property. type: integer the maximum value that the scale or number box may be set to. the default value is 100 for scales and infinity for number boxes. maxlength typ...
... valuenumber type: number in contrast to the value property which holds a string representation, the valuenumber property is a number containing the current value of the number box. wraparound type: boolean gets and sets the value of the wraparound attribute. methods decrease() return type: no return value decreases the value of the scale or number box by the increment. increase() return type: no return value increases the value of the scale or number box by the increment. reset() return type: no return value resets the preference to its default value. for a textbox it also clears the undo transaction list (gecko 1.9). select() return type: no return value se...

Common Firefox theme issues and solutions - Archive of obsolete content
panel at the bottom of the "door hanger" for the save password panel displayed when a user logs into a website needs to be styled to match rest of panel including border. this issue also applies to the edit bookmark panel, which is activated by double clicking on the bookmark star in the url bar. for details, please see bug 708797. "about" pages about:addons disabled add-on icons are not grey scale in tools > add-ons, the icons of disabled icons need to be converted to grey scale. to accomplish this copy the file chrome://mozapps/skin/extensions/extensions.svg from the default theme into the mozapps/extensions/ folder of your theme and add the following style rule to the css file extensions.css: .addon[active="false"] .icon { filter: url("chrome://mozapps/skin/extensions/extensions.svg#g...
...n tools > add-ons, the icons of disabled icons need to be converted to grey scale. to accomplish this copy the file chrome://mozapps/skin/extensions/extensions.svg from the default theme into the mozapps/extensions/ folder of your theme and add the following style rule to the css file extensions.css: .addon[active="false"] .icon { filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); opacity:0.3; } about:memory about:memory nodes do not collapse the styling of about:memory is a little messed up in that nodes do not collapse as they should when clicked on. to fix this issue you need to copy the following file from the latest version of firefox to your theme: chrome://global/content/aboutmemory.css. about:permissions domain names don't line up in about:permissions th...

Building up a basic demo with Babylon.js - Game development
so its 3d shape can be seen, and given a yellow material. here's how the scene should look right now: this works, but it is a bit boring. in a game something is usually happening — we can see animations and such — so let's try to breathe a little life into those shapes by animating them. animation we already used position and rotation to adjust the position of the shapes; we could also scale them. to show actual animation, we need to make changes to these values inside the rendering loop at the end of our code, so they are updated on every frame. define a helper variable — t — that we will use for animations, just before the renderloop, and decrement it on every frame inside the loop, like this: var t = 0; var renderloop = function () { scene.render(); t -= 0.01; // ...
...op = function () { scene.render(); t -= 0.01; // animation code goes here }; engine.runrenderloop(renderloop); the t variable will be incremented on every rendered frame. rotation applying rotation is as easy as adding this line at the end of the renderloop function: box.rotation.y = t*2; it will rotate the box along the y axis. scaling add this line below the previous one to scale the torus: torus.scaling.z = math.abs(math.sin(t*2))+0.5; there's a little bit of adjustment made to make the animation look and feel nice. you can experiment with the values and see how it affects the animation. moving by changing the position of the cylinder directly we can move it on the scene — add this line below the previous one: cylinder.position.y = math.sin(t*3); the cylinder w...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
plays a document. in modern browsers, it usually is a tab, but can be a window or even only parts of a page, like a frame or an iframe. 44 bézier curve bézier curve, glossary, graphics, reference a bézier curve (pronounced [bezje]) is a mathematically described curve used in computer graphics and animation. in vector images, they are used to model smooth curves that can be scaled indefinitely. 45 cdn glossary, infrastructure a cdn (content delivery network) is a group of servers spread out over many locations. these servers store duplicate copies of data so that servers can fulfill data requests based on which servers are closest to the respective end-users. cdns make for fast service less affected by high traffic. 46 cia glossary, sec...
... glossary, visualviewport, viewport, visual viewport the portion of the viewport that is currently visible is called the visual viewport. this can be smaller than the layout viewport, such as when the user has pinched-zoomed. the visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page. 484 voip glossary, infrastructure, voip voip (voice over internet protocol) is a technology used to transmit voice messages over ip (internet protocol) networks. common voip packages include skype, msn messenger, yahoo and many more. everything transferrred through voip is digital. it is also known as ip telephony, or broadband telephony. the ma...

Overflowing content - Learn web development
height. then we add content that exceeds the allocated space. the content overflows the box and falls into the paragraph below. the second example is a word in a box. the box has been made too small for the word and so it breaks out of the box. you might wonder why css works in such a messy way, displaying content outside of its intended container. why not hide overflowing content? why not scale the size of the container to fit all the content? wherever possible, css does not hide content. this would cause data loss. the problem with data loss is that you might not notice. website visitors may not notice. if the submit button on a form disappears and no one can complete the form, this could be a big problem! instead, css overflows in visible ways. you are more likely to see there is a p...
...axis, you could use the overflow-y property, setting overflow-y: scroll. you can also scroll on the x axis using overflow-x, although this is not a recommended way to accommodate long words! if you have a long word in a small box, you might consider using the word-break or overflow-wrap properties. in addition, some of the methods discussed in sizing items in css may help you create boxes that scale better with varying amounts of content. as with scroll, you get a scrollbar in the scrolling dimension whether or not there is enough content to cause a scrollbar. note: you can specify x and y scrolling using the overflow property, passing two values. if two keywords are specified, the first applies to overflow-x and the second applies to overflow-y. otherwise, both overflow-x and overflow-...

Sizing items in CSS - Learn web development
pace for at its minimum height. in the example below you can see two boxes, both with a defined height of 150 pixels. the box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels. this is very useful for dealing with variable amounts of content while avoiding overflow. a common use of max-width is to cause images to scale down if there is not enough space to display them at their intrinsic width while making sure they don't become larger than that width. as an example, if you were to set width: 100% on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. if you instead use max-width: 100%, the image is able to bec...
...e below, we have used the same image three times. the first image has been given width: 100% and is in a container which is larger than it, therefore it stretches to the container width. the second image has max-width: 100% set on it and therefore does not stretch to fill the container. the third box contains the same image again, also with max-width: 100% set; in this case you can see how it has scaled down to fit into the box. this technique is used to make images responsive, so that when viewed on a smaller device they scale down appropriately. you should, however, not use this technique to load really large images and then scale them down in the browser. images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. downlo...

Beginner's guide to media queries - Learn web development
an see how the design responds and works as a single column, two columns, or three columns, depending on the available width. this is a very simple example of a mobile first responsive design. the viewport meta tag if you look at the html source in the above example, you'll see the following element included in the head of the document: <meta name="viewport" content="width=device-width,initial-scale=1"> this is the viewport meta tag — it exists as a way control how mobile browsers render content. this is needed because by default, most mobile browsers lie about their viewport width. non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixel...
...is reported as 960 pixels, then mobile layouts (for example created using a media query of @media screen and (max-width: 600px) { ... }) are not going to render as expected. to remedy this, including a viewport meta tag like the one above on your page tells the browser "don't render the content with a 960 pixel viewport — render it using the real device width instead, and set a default initial scale level for better consistency." the media queries will then kick in as expected. there are a number of other options you can put inside the content attribute of the viewport meta tag — see using the viewport meta tag to control layout on mobile browsers for more details. do you really need a media query? flexbox, grid, and multi-column layout all give you ways to create flexible and even resp...

nsIAccessibleProvider
xultabbox 0x00001018 a combination of a tabs object and a tabpanels object. xultabs 0x00001019 the collection of tab objects, usable in the tabbox and independent of as well. xultext 0x0000101a xultextbox 0x000...
... is used inside xforms select1 elements represented by radio group. xformsselectcombobox 0x00002014 used for xforms select1 element that is represented by combobox. xformsitemcombobox 0x00002015 used for xforms item element that is used inside xforms select1 elements represented by combobox. xformsdropmarkerwidget 0x00002101 used for dropmarker widget that is used by xforms elements. xformscalendarwidget 0x00002102 used for calendar widget that is used by xforms elements. xformscomboboxpopupwidget 0x00002103 used for popup widget that is used by xforms minimal select1 elements. ...

nsIContentView
amonkey 2.1) see working with content views for details on how to use this api. note: currently, only <frame> and <iframe> elements are handled as content views. support for using this api for all scrollable elements is coming; see bug 618975 for details. method overview void scrollby(in float dxpx, in float dypx); void scrollto(in float xpx, in float ypx); void setscale(in float xscale, in float yscale); attributes attribute type description contentheight float read only. contentwidth float dimensions of scrolled content in chrome-document css pixels. read only. id nscontentviewid id that can be used in conjunction with nsidomwindowutils to change the actual document, instead of just how it is t...
...o scroll on the y axis; specify a positive value to scroll down or a negative value to scroll up. scrollto() scrolls the content view to the specified position, in chrome-document css pixels. fails if the view isn't valid. void scrollto( in float xpx, in float ypx ); parameters xpx the x coordinate to scroll to, in css pixels. ypx the y coordinate to scroll to, in css pixels. setscale() sets the content view's scale for each axis. void setscale( in float xscale, in float yscale ); parameters xscale horizontal scaling factor; specify 1.0 to use the natural size of the content. yscale vertical scaling factor; specify 1.0 to use the natural size of the content. ...

nsIDOMWindowUtils
yport( in float axpx, in float aypx, in float awidthpx, in float aheightpx ); parameters axpx aypx awidthpx aheightpx setresolution() get/set the resolution at which rescalable web content is drawn. currently this is only (some) thebes content. setting a new resolution does *not* trigger reflow. ...
...ion does *not* trigger reflow. this api is entirely separate from textzoom and fullzoom; a resolution scale can be applied together with both textzoom and fullzoom. the effect of is api for gfx code to allocate more or fewer pixels for rescalable content by a factor of |resolution| in either or both dimensions. setresolution together with setdisplayport() can be used to implement a non-reflowing scale-zoom in concert with another entity that can draw with a scale. for example, to scale a content |window| inside a <browser> by a factor of 2.0. window.setdisplayport()(x, y, oldw / 2.0, oldh / 2.0); window.setresolution(2.0, 2.0); // elsewhere browser.setviewportscale(2.0, 2.0); the caller of this method must have universalxpconnect privileges. void setresolution( in float axresolution, in...

nsIMarkupDocumentViewer
al text. this may be either "logical" or "visual". logical text will be reordered for presentation using the unicode bidi algorithm. visual text will be displayed without reordering. 1 - the default order for the charset 2 - logical order 3 - visual order. defaultcharacterset acstring forcecharacterset acstring fullzoom float the amount by which to scale all lengths. default is 1.0. hintcharacterset acstring hintcharactersetsource print32 minfontsize long the minimum font size to allow. note: this attribute was added late in the gecko 2.0 development cycle and was implemented by the nsimarkupdocumentviewer_mozilla_2_0_branch interface; it was merged into this interface in gecko 7.0. ...
...source print32 minfontsize long the minimum font size to allow. note: this attribute was added late in the gecko 2.0 development cycle and was implemented by the nsimarkupdocumentviewer_mozilla_2_0_branch interface; it was merged into this interface in gecko 7.0. prevdoccharacterset acstring textzoom float the amount by which to scale all text. default is 1.0. methods scrolltonode() scroll the make the specified node visible. void scrolltonode( in nsidomnode node ); parameters node the nsidomnode of the node to make visible. sizetocontent() tell the container to shrink-to-fit or grow-to-fit its contents. void sizetocontent(); parameters none. see also full page zoom ...

Animation inspector example: Web Animations API - Firefox Developer Tools
nt <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" id="icon"/> <span id="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)...
... { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var notekeyframeoptions = { duration: 500, fill: 'forwards', easing: 'ease-out', delay: 150 } var icon = document.getelementbyid("icon"); var note = document.getelementbyid("note"); ...

CanvasPattern.setTransform() - Web APIs
javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas ...
...-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1.create...

CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
the imagesmoothingenabled property of the canvasrenderingcontext2d interface, part of the canvas api, determines whether scaled images are smoothed (true, default) or not (false). on getting the imagesmoothingenabled property, the last value it was set to is returned. this property is useful for games and other apps that use pixel art. when enlarging images, the default resizing algorithm will blur the pixels. set this property to false to retain the pixels' sharpness. note: you can adjust the smoothing quality with the imagesmoothingquality property. syntax ctx.imagesmoothingenabled = value; options value a boolean indicating whether to smooth scaled images or not. the default value is true. examples disabling image smoothing this example compares three images. the first image ...
...ain the pixels' sharpness. note: you can adjust the smoothing quality with the imagesmoothingquality property. syntax ctx.imagesmoothingenabled = value; options value a boolean indicating whether to smooth scaled images or not. the default value is true. examples disabling image smoothing this example compares three images. the first image is drawn at its natural size, the second is scaled to 3x and drawn with image smoothing enabled, and the third is scaled to 3x but drawn with image smoothing disabled. html <canvas id="canvas" width="460" height="210"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '16px sans-serif'; ctx.textalign = 'center'; const img = new image(); img.src = 'https://interactive-exam...

CanvasRenderingContext2D - Web APIs
vasrenderingcontext2d.currenttransform current transformation matrix (svgmatrix object). canvasrenderingcontext2d.gettransform retrieves the current transformation matrix being applied to the context. canvasrenderingcontext2d.rotate() adds a rotation to the transformation matrix. the angle argument represents a clockwise rotation angle and is expressed in radians. canvasrenderingcontext2d.scale() adds a scaling transformation to the canvas units by x horizontally and by y vertically. canvasrenderingcontext2d.translate() adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid. canvasrenderingcontext2d.transform() multiplies the current transformation matrix with the matrix described by its arguments. canvasrenderingcontext2d.
...by the rectangle which starts at (sx, sy) and has an sw width and sh height. canvasrenderingcontext2d.putimagedata() paints data from the given imagedata object onto the bitmap. if a dirty rectangle is provided, only the pixels from that rectangle are painted. image smoothing canvasrenderingcontext2d.imagesmoothingenabled image smoothing mode; if disabled, images will not be smoothed if scaled. canvasrenderingcontext2d.imagesmoothingquality allows you to set the quality of image smoothing. the canvas state the canvasrenderingcontext2d rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). the following methods help you to work with that state: canvasrenderingcontext2d.save() saves the current dr...

Applying styles and colors - Web APIs
(that is, (3,1) to (3,5)), instead of down the middle of pixels. while slightly painful when initially working with scalable 2d graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. a 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position. a linecap example the linecap property determines how the end points of every line are drawn. there are three possible values for this property and those are: butt, round and square. by default this property is set to butt. butt the ends of lines are squared off at the endpoints. round the ends of lines are rounded. square the ends of...
...nnection point can be placed from the inside connection point. if two lines exceed this value, a bevel join gets drawn instead. note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterlimit property (whose default value is 10.0 in the html <canvas>), so the miterlimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges. more exactly, the miter limit is the maximum allowed ratio of the extension length (in the html canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. it can equivalently be def...

DOMMatrix - Web APIs
self. dommatrix.premultiplyself() modifies the matrix by pre-multiplying it with the specified dommatrix. this is equivalent to the dot product b⋅a, where matrix a is the source matrix and b is the matrix given as an input to the method. returns itself. dommatrix.translateself() modifies the matrix by applying the specified vector. the default vector is [0, 0, 0]. returns itself. ...
...atrix by applying the specified vector. the default vector is [0, 0, 0]. returns itself. dommatrix.scalenonuniformself() modifies the matrix by applying the specified scaling on the x, y, and z axes, centered at the given origin. by default, the y and z axes' scaling factors are both 1, but the scaling factor for x must be specified. the default origin is (0, 0, 0). returns itself. dommatrix.scaleself() modifies the matrix by applying the specified scaling factors, with the center located at the specified origin. also returns itself. by default, the scaling factor is 1 for all three axes, and the origin is (0, 0, 0). returns itself. dommatrix.scale3dself() modifies the matrix by applying the specified scaling factor to all three axes, centered on the given origin. returns itself. domma...

Element.msZoomTo() - Web APIs
gn this point with the contenty point. middle: default. aligns the vertical center of the viewport to the element's contenty value. top: aligns the top-most point of the viewport to the element's contenty value. bottom: aligns the bottom-most point of the viewport to the element's contenty value. integer: aligns the specified y-coordinate of the viewport to the element's contenty value. scalefactor[in]: floating-point. the scale factor (mscontentzoomfactor) to zoom to. if no value is specified, defaults to the current zoom level (no additional zoom occurs).this argument is ignored if the element is not zoomable. animate[in]: the type of animation to use. default: uses the default animation. none: no animation is used. this method has no scrolling effect on non-scrollable elemen...
...ntent-zooming: none"). ...

GestureEvent - Web APIs
rn derives from event. constructor gestureevent() creates a gestureevent object. properties this interface also inherits properties of its parents, uievent and event. gestureevent.rotation read only change in rotation (in degrees) since the event's beginning. positive values indicate clockwise rotation; negative values indicate anticlockwise rotation. initial value: 0.0 gestureevent.scale read only distance between two digits since the event's beginning. expressed as a floating-point multiple of the initial distance between the digits at the beginning of the gesture. values below 1.0 indicate an inward pinch (zoom out). values above 1.0 indicate an outward unpinch (zoom in). initial value: 1.0 methods this interface also inherits methods of its parents, uievent and event. ...
... nochrome android no support nofirefox android no support noopera android no support nosafari ios full support 2samsung internet android no support noscale non-standardchrome no support noedge no support nofirefox no support noie no support noopera no support nosafari full support 9we...

HTMLCanvasElement.toDataURL() - Web APIs
ty with jpegs var fullquality = canvas.todataurl('image/jpeg', 1.0); // data:image/jpeg;base64,/9j/4aaqskzjrgabaq...9oadambaairaxeapwd/ad/6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically change images you can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs. color in this example): html <img class="grayscale" src="mypicture.png" alt="description of my picture" /> javascript window.addeventlistener('load', removecolors); function showcolorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function rem...
...icture.png" alt="description of my picture" /> javascript window.addeventlistener('load', removecolors); function showcolorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function removecolors() { var aimages = document.getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas = document.createelement('canvas'), octx = ocanvas.getcontext('2d'); for (var nwidth, nheight, oimgdata, ograyimg, npixel, apix, npixlen, nimgid = 0; nimgid < nimgslen; nimgid++) { ocolorimg = aimages[nimgid]; nwidth = ocolorimg.offsetwidth; nheight = ocolorimg.offsetheight; ocanvas.width = nwidth; ocanvas.height = nhei...

MSGestureEvent - Web APIs
ter of the gesture area. for example, the distance between fingers. msgestureevent.gestureobject read only returns the msgesture object for this gesture event. msgestureevent.rotation read only amount of rotation (in radians) since the previous msgestureevent of the current gesture. positive values indicate clockwise rotation; negative values indicate anticlockwise rotation. msgestureevent.scale read only the difference in scale (for zoom gestures) from the previous msgestureevent of the current gesture. msgestureevent.translationx read only distance traversed along the x-axis since the previous msgestureevent of the current gesture msgestureevent.translationy read only distance traversed along the y-axis since the previous msgestureevent of the current gesture msgestureevent.ve...
... nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support noscale non-standardchrome no support noedge no support 12 — 79firefox no support noie full support 10opera no support nosafari no support nowebview andro...

RTCRtpEncodingParameters - Web APIs
media packet in milliseconds. this is typically only relevant for audio encodings. the user agent will try to match this as well as it can, but there is no guarantee. rid a domstring which, if set, specifies an rtp stream id (rid) to be sent using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first created. ...
...no guarantee. rid a domstring which, if set, specifies an rtp stream id (rid) to be sent using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first created. scaleresolutiondownby only used for senders whose track's kind is video, this is a double-precision floating-point value specifying a factor by which to scale down the video during encoding. the default value, 1.0, means that the sent video's size will be the same as the original. a value of 2.0 scales the video frames down by a factor of 2 in each dimension, resulting in a video 1/4 the size of the original. the value must not be less than 1.0 (you can't use this to scale the video up). specifications specification status comment ...

RTCRtpSendParameters.encodings - Web APIs
media packet in milliseconds. this is typically only relevant for audio encodings. the user agent will try to match this as well as it can, but there is no guarantee. rid a domstring which, if set, specifies an rtp stream id (rid) to be sent using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first created. ...
...no guarantee. rid a domstring which, if set, specifies an rtp stream id (rid) to be sent using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first created. scaleresolutiondownby only used for senders whose track's kind is video, this is a double-precision floating-point value specifying a factor by which to scale down the video during encoding. the default value, 1.0, means that the sent video's size will be the same as the original. a value of 2.0 scales the video frames down by a factor of 2 in each dimension, resulting in a video 1/4 the size of the original. the value must not be less than 1.0 (you can't use this to scale the video up). specifications specification status comment ...

ReadableStream.pipeThrough() - Web APIs
r the writable and/or readable property of transformstream are undefined. examples in the following example (see unpack chunks of a png for the full code running live, and png-transform-stream for the source code), an image is fetched and its body retrieved as a readablestream. ...
...dablestream. next, we log the contents of the readable stream, use pipethrough() to send it to a new function that creates a gray-scaled version of the stream, then log the new stream's contents too. // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(rs => logreadablestream('fetch response stream', rs)) // create a gray-scaled png stream out of the original .then(body => body.pipethrough(new pngtransformstream())) .then(rs => logreadablestream('png chunk stream', rs)) specifications specification status comment streamsthe definition of 'pipethrough()' in that specification. living standard initial definition. ...

getBBox() - Web APIs
alue relative to the viewport syntax let bboxrect = object.getbbox(); return value the returned value is a svgrect object, which defines the bounding box. this value is irrespective of any transformation attribute applied to it or the parent elements. ...
... the returned value is a svgrect object, which defines the bounding box. this value is irrespective of any transformation attribute applied to it or the parent elements. ...

SVGTransformList - Web APIs
en the list corresponds to a read only attribute or when the object itself is read only. example using multiple svgtransform objects in this example we create a function that will apply three different transformations to the svg element that has been clicked on. in order to do this we create a separate svgtransform object for each transformation -- such as translate, rotate, and scale. we apply multiple transformation by appending the transform object to the svgtransformlist associated with an svg element. <svg id="my-svg" viewbox="0 0 300 280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { ...
... var svgroot = evt.target.parentnode; // svgtransformlist of the element that has been clicked on var tfmlist = evt.target.transform.baseval; // create a seperate transform object for each transform var translate = svgroot.createsvgtransform(); translate.settranslate(50,5); var rotate = svgroot.createsvgtransform(); rotate.setrotate(10,0,0); var scale = svgroot.createsvgtransform(); scale.setscale(0.8,0.8); // apply the transformations by appending the svgtranform objects to the svgtransformlist associated with the element tfmlist.appenditem(translate); tfmlist.appenditem(rotate); tfmlist.appenditem(scale); } ]]> </script> <polygon fill="orange" stroke="black" stroke-width="5" points="100,225 ...

VRStageParameters - Web APIs
this interface is accessible through the vrdisplay.stageparameters property. properties vrstageparameters.sittingtostandingtransform read only contains a matrix that transforms the sitting-space view matrices of vrframedata to standing-space. vrstageparameters.sizex read only returns the width of the play-area bounds in meters. vrstageparameters.sizey read only returns the depth of the play-area bounds in meters. ...
... read only returns the depth of the play-area bounds in meters. ...

Visual Viewport API - Web APIs
visual viewport concepts and usage the mobile web contains two viewports, the layout viewport and the visual viewport. ...
...eight - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' }) } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification. draft initial definition. ...

WebGLRenderingContext.getUniformLocation() - Web APIs
ations of three uniforms from the shading program, then sets the value of each of the three uniforms. gl.useprogram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); uglobalcolor = gl.getuniformlocation(shaderprogram, "uglobalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector") gl.uniform2fv(uscalingfactor, currentscale); gl.uniform2fv(urotationvector, currentrotation); gl.uniform4fv(uglobalcolor, [0.1, 0.7, 0.2, 1.0]); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that article for the full sample and to see the resulting animation in action. after setting the current shading program to shaderprogram, this code fetches the three uniforms "uscalingfacto...
...on in action. after setting the current shading program to shaderprogram, this code fetches the three uniforms "uscalingfactor", "uglobalcolor", and "urotationvector", calling getuniformlocation() once for each uniform. then the three uniforms' values are set: the uscalingfactor uniform — a 2-component vertex — receives the horizontal and vertical scaling factors from the variable currentscale. the uniform urotationvector is set to the contents of the variable currentrotation. this, too, is a 2-component vertex. finally, the uniform uglobalcolor is set to the color [0.1, 0.7, 0.2, 1.0], the components in this 4-component vector represent the values of red, green, blue, and alpha, respectively. having done this, the next time the shading functions are called, their own variables nam...

WebGLRenderingContext.polygonOffset() - Web APIs
the default value is 0. units a glfloat which sets the multiplier by which an implementation-specific value is multiplied with to create a constant depth offset. the default value is 0. return value none. examples the polygon offset fill is disabled by default. ...
...the default value is 0. units a glfloat which sets the multiplier by which an implementation-specific value is multiplied with to create a constant depth offset. the default value is 0. return value none. examples the polygon offset fill is disabled by default. ...

Advanced techniques: Creating and sequencing audio - Web APIs
a browser will clamp values outside this range. creating a buffer source now we have the audio buffer and have fil...
... let data = buffer.getchanneldata(0); // get data // fill the buffer with noise for (let i = 0; i < buffersize; i++) { data[i] = math.random() * 2 - 1; } note: why -1 to 1? when outputting sound to a file or speakers we need to have a number to represent 0db full scale — the numerical limit of the fixed point media or dac. in floating point audio, 1 is a convenient number to map to "full scale" for mathematical operations on signals, so oscillators, noise generators and other sound sources typically output bipolar signals in the range -1 to 1. a browser will clamp values outside this range. creating a buffer source now we have the audio buffer and have filled it with data, we need a node to add to our graph that can use the buffer as a source. we'll create a audiobuffersourcenode fo...

prefers-reduced-motion - CSS: Cascading Style Sheets
te both; } /* tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. ...
...imation to avoid vestibular motion triggers like scaling or panning large objects. */ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status comment media queries level 5the definition of 'prefers-reduced-motion' in that specification. editor's draft initial...

Color picker tool - CSS: Cascading Style Sheets
les { width: 375px; height: 114px; max-height: 218px; margin: 0 10px 0 30px; overflow: hidden; position: relative; float: left; transition: all 0.2s; } #picker-samples .sample { width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; position: absolute; float: left; transition: all 0.2s; } #picker-samples .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #picker-samples .sample[data-active='true'] { border-color: #999; } #picker-samples .sample[data-active='true']:after { content: ""; position: absolute; background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #picker-samples #add-icon { width: 100%; height: 100%; positio...
...ht: inherit; } #color-palette .palette { width: 456px; height: 38px; margin: 3px; padding: 3px; display: table; background-color: #fff; } #color-palette .palette .sample { width: 30px; height: 30px; margin: 3px; position: relative; border: 1px solid #ddd; float: left; transition: all 0.2s; } #color-palette .palette .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #color-palette .controls { } #color-palette .controls > * { float: left; } #color-palette .controls > *:hover { cursor: pointer; } #color-palette .controls .lock { width: 24px; height: 24px; margin: 10px; padding: 3px; background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); background-repeat: no-repeat; background-position: bottom righ...

CSS reference - CSS: Cascading Style Sheets
stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indetermi...
...ntentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()scalez():scopescroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-pad...

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
100 pixels but no height or intrinsic ratio. this is, basically, a thin strip of wallpaper that could be stretched across the entire height of a block. svg source one specified dimension with intrinsic ratio this image specifies a 100 pixel height but no width. it also specifies an intrinsic aspect ratio of 3:4. this ensures that its width:height ratio is always 3:4, unless it's deliberately scaled to a disproportionate size (that is, by explicitly specifying both width and height that aren't of that ratio). this is very much like specifying a specific width and height, since once you have one dimension and a ratio, the other dimension is implied, but it's still a useful example. svg source no width or height with intrinsic ratio this image doesn't specify either a width or a height;...
...r: the background image is rendered covering the entire background area. this satisfies the largest-or-smallest constraint. background: url(no-dimensions-or-ratio.svg); background-size: contain; the rendered output looks like this: source: one specified dimension, no intrinsic ratio similarly, if the image has one dimension specified but no intrinsic ratio, rule 4 applies, and the image is scaled to cover the entire background area. background: url(100px-wide-no-height-or-ratio.svg); background-size: contain; the rendered output looks like this: source: one specified dimension with intrinsic ratio things change when you specify an intrinsic ratio. in this case, rule 1 isn't relevant, so rule 2 is applied: we try to preserve any intrinsic ratio (while respecting contain or cover). ...

Viewport concepts - CSS: Cascading Style Sheets
visible portion of the layout viewport. if you scroll down, you are changing the contents of the visual viewport and bringing the bottom of the layout viewport into view, displaying the sticky footer, which will then stay stuck at the bottom. the visual viewport is the visual portion of a screen not including on-screen keyboards, areas outside of a pinch-zoom area, or other feature that doesn't scale with the dimensions of a page. the visual viewport is the same size as the layout viewport or smaller. for a page containing iframes, objects, or external svg, both the containing pages and each included file has their own unique window object. only the top-level window has a visual viewport that may be distinct from the layout viewport. for included documents, the visual viewport and layout vie...
... many if not everyone. to tell a mobile browser to use the viewport width instead of the default 980px as the width of the screen, developers can include a viewport meta tag, like the following: <meta name="viewport" content="width=device-width"> the width property controls the size of the viewport. it should preferably be set to device-width, which is the width of the screen in css pixels at a scale of 100%. there are other properties, including maximum-scale, minimum-scale, and user-scalable, which control whether users can zoom the page in or out, but the default values are the best for accessibility and user experience, so these can be omitted. see also @viewport css at-rule visual viewport api <meta>, specifically <meta name="viewport"> using the viewport meta tag to control layou...

animation - CSS: Cascading Style Sheets
tion | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div class="cel...
...ex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.a...

backdrop-filter - CSS: Cascading Style Sheets
the effect you must make the element or its background at least partially transparent. ...
...l valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )<grayscale()> = grayscale( <number-percentage> )<hue-rotate()> = hue-rotate( <angle> )<invert()> = invert( <number-percentage> )<opacity()...

background-size - CSS: Cascading Style Sheets
using the keyword values contain or cover. using a width value only, in which case the height defaults to auto. using both a width and a height value, in which case the first sets the width and the second sets the height. each value can be a <length>, a <percentage>, or auto. to specify the size of multiple background images, separate the value for each one with a comma. ...
...e height defaults to auto. using both a width and a height value, in which case the first sets the width and the second sets the height. each value can be a <length>, a <percentage>, or auto. to specify the size of multiple background images, separate the value for each one with a comma. values contain scales the image as large as possible without cropping or stretching the image. cover scales the image as large as possible without stretching the image. if the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains. auto scales the background image in the corresponding direction such that its intrinsic proportions are maintained. <length> stretches the image in the corresponding dimension to the specified len...

border-image-slice - CSS: Cascading Style Sheets
reates nine regions in total: four corners, four edges, and a middle region. four slice lines, set a given distance from their respective sides, control the size of the regions. the above diagram illustrates the location of each region. zones 1-4 are corner regions. each one is used a single time to form the corners of the final border image. zones 5-8 are edge regions. these are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element. zone 9 is the middle region. it is discarded by default, but is used like a background image if the keyword fill is set. the border-image-repeat, border-image-width, and border-image-outset properties determine how these regions are used to form the final border image. syntax /* all sides */ border-imag...
...ies, allowing you to appreciate the effect they have: border-image-slice changes the size of the image slice sampled for use in each border and border corner (and the content area, if the fill keyword is used) — varying this away from 30 causes the border to look somewhat irregular, but can have some interesting effects. border-width: changes the width of the border. the sampled image size is scaled to fit inside the border, which means that if the width is bigger than the slice, the image can start to look somewhat pixellated (unless of course you use an svg image). html <div class="wrapper"> <div></div> </div> <ul> <li> <label for="width">slide to adjust <code>border-width</code></label> <input type="range" min="10" max="45" id="width"> <output id="width-output">30px</o...

font-smooth - CSS: Cascading Style Sheets
rom subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter. subpixel-antialiased - on most non-retina displays, this will give the sharpest text. firefox implements a similar property, but with different values: -moz-osx-font-smoothing. it only works on mac os x/macos. auto - allow the browser to select an optimization for font smoothing, typically grayscale. grayscale - render text with grayscale antialiasing, as opposed to the subpixel. switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter. formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | never | always | <absolute-size> | <length>where <absolute-size...
...slightly lighter in weight. for those of you not on a macos system, here is a screenshot (the live version appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p> css html { background-color: black; color: white; font-size: 3rem; } p { text-align: center; } .smoothed { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } result specifications not part of any standard. ...

matrix() - CSS: Cascading Style Sheets
sformation. tx ty are <number>s describing the translation to apply. ...
...ber>s describing the translation to apply. ...

<transform-function> - CSS: Cascading Style Sheets
ective() sets the distance between the user and the z=0 plane. rotation rotate() rotates an element around a fixed point on the 2d plane. rotate3d() rotates an element around a fixed axis in 3d space. rotatex() rotates an element around the horizontal axis. rotatey() rotates an element around the vertical axis. rotatez() rotates an element around the z-axis. scaling (resizing) scale() scales an element up or down on the 2d plane. scale3d() scales an element up or down in 3d space. scalex() scales an element up or down horizontally. scaley() scales an element up or down vertically. scalez() scales an element up or down along the z-axis. skewing (distortion) skew() skews an element on the 2d plane. skewx() skews an element in the horizontal direction. skewy()...
...iv class="face bottom">6</div> </section> <div class="select-form"> <label>select a transform function</label> <select> <option selected>choose a function</option> <option>rotate(360deg)</option> <option>rotatex(360deg)</option> <option>rotatey(360deg)</option> <option>rotatez(360deg)</option> <option>rotate3d(1, 1, 1, 90deg)</option> <option>scale(1.5)</option> <option>scalex(1.5)</option> <option>scaley(1.5)</option> <option>scalez(1.5)</option> <option>scale3d(1, 1.5, 1.5)</option> <option>skew(17deg, 13deg)</option> <option>skewx(17deg)</option> <option>skewy(17deg)</option> <option>translate(100px, 100px)</option> <option>translatex(100px)</option> <option>translatey(100px)</o...

transform-origin - CSS: Cascading Style Sheets
transform: rotate(30deg); transform-origin: -1em -3em; <div class="box5">&nbsp;</div> .box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -1em -3em; -webkit-transform-origin: -1em -3em; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: scale(1.7); <div class="box6">&nbsp;</div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); } transform: scale(1.7); transform-origin: 0 0; <div class="box7">&nbsp;</div> .box7 { margin: 0.5em; width: 3em; height: 3em; ...
... .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); } transform: scale(1.7); transform-origin: 0 0; <div class="box7">&nbsp;</div> .box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); transform-origin: 0 0; -webkit-transform-origin: 0 0; } transform: scale(1.7); transform-origin: 100% -30%; <div class="box8">&nbsp;</div> .box8 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); transform-ori...

Audio and video manipulation - Developer guides
this article provides a reference to explain what you need to do. ...
... graphics onto web pages; it is very powerful and can be coupled tightly with video. the general technique is to: write a frame from the <video> element to an intermediary <canvas> element. read the data from the intermediary <canvas> element and manipulate it. write the manipulated data to your "display" <canvas>. pause and repeat. for example, let's process a video to display it in greyscale. in this case, we'll show both the source video and the output greyscale frames. ordinarily, if you were implementing a "play video in greyscale" feature, you'd probably add display: none to the style for the <video> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames. html we can set up our video player and <canvas> element ...

Graphic design for responsive sites - Progressive web apps (PWAs)
e images in question start to look pixellated and ugly because they have been zoomed in. high res and low res image copies one option here is to create a hi res and a low res set of images, then use resolution media queries to serve the hi res images only to hi res devices. programmatic images you should also try to use programmatic/vector graphics as much as possible, as they theoretically scale infinitely so will still look crisp at high resolutions. you could use css3 properties for generating effects like drop shadows, gradients and rounded corners, and you could also consider using svg for other ui elements, instead of raster graphics formats. the downsides here are that css3 properties and svg don't work on old browsers such as ie6-8 (although polyfills are available, and you could ...
... ...

The building blocks of responsive design - Progressive web apps (PWAs)
ons inside the first two cards, and give all card contents a top margin so that their content won't be lost under the navigation buttons (see below). this was necessary because mozilla brick (also see below) forces its components to be 100% of the screen width and height. we have used vw (viewport width) units for these — 1vw is equivalent to 1% of the viewport width. this makes the dimensions scale up and down nicely along with the viewport width. last for this section, we absolutely positioned all buttons at the bottom of the cards they are in, so the layout looks ok at different viewport size variations. we then add a rule that positions the second button in any card a button's width higher up the card. when you click on an image in the gallery it brings up options to delete or cancel del...
...en zoomed or viewed on high resolution devices (at least, in theory). some ideas follow, which also help to keep the number of http requests down — another key factor in mobile app performance: you should try to use css3 features to programmatically generate graphical effects where possible, rather than relying on image files. these include rounded corners, gradients, and drop shadows. these scale as the resolution changes or the browser zooms. although they are not supported very well on older browsers such as internet explorer 6-8, this is not too much of a concern when you are creating an interface aimed at modern devices, and they also tend to gracefully degrade. you could also try using svg to create interface elements. svg produces vector graphics and is supported well across modern...

<metadata> - SVG: Scalable Vector Graphics
>a built-in disc drive</desc> <rect width="58" height="3" x="12" y="8"/> <rect width="8" height="2" x="12" y="15"/> </g> <circle cx="135" cy="40" r="5"/> </g> </symbol> </defs> <text x="0" y="15">network</text> <!-- use the hub symbol. ...
...="5"/> </g> </symbol> </defs> <text x="0" y="15">network</text> <!-- use the hub symbol. --> <g id="hub" transform="translate(80 45)"> <title>hub</title> <use xlink:href="#hub" transform="scale(0.75)"/> </g> <!-- use the computer symbol. --> <g id="computera" transform="translate(20 170)"> <title>computer a</title> <use xlink:href="#computer" transform="scale(0.5)"/> </g> <!-- use the same computer symbol. --> <g id="computerb" transform="translate(300 170)"> <title>computer b</title> <use xlink:href="#computer" transform="scale(0.5)"/> </g> <!-- draw cable a. --> <g id="cablea" transform="translate(107 88)"> <title>cable a</title> <desc>10baset twisted pair cable</desc> <path d="m0,0c100,140 50,140 -8,160"/> </g> ...

SVG documentation index - SVG: Scalable Vector Graphics
mation, experimental, graphics, reference, rotate, svg the rotate attribute specifies how the animated element rotates as it travels along a path specified in an <animatemotion> element. 181 rx svg, svg attribute the rx attribute defines a radius on the x-axis. 182 ry svg, svg attribute the ry attribute defines a radius on the y-axis. 183 scale filters, svg, svg attribute the scale attribute defines the displacement scale factor to be used on a <fedisplacementmap> filter primitive. the amount is expressed in the coordinate system established by the primitiveunits attribute on the <filter> element. 184 seed filters, svg, svg attribute the seed attribute represents the starting number for the pseudo random n...
... to the stroke of a shape. 209 stroke-width svg, svg attribute the stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. 210 style svg, svg attribute the style attribute allows to style an element using css declarations. it functions identically to the style attribute in html. 211 surfacescale filters, needscompattable, svg, svg attribute the surfacescale attribute represents the height of the surface for a light filter primitive. 212 systemlanguage svg, svg attribute the systemlanguage attribute represents a list of supported language tags. this list is matched against the language defined in the user preferences. 213 tabindex svg, svg att...

Basic Transformations - SVG: Scalable Vector Graphics
r:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> </svg> this example shows again the small square shown above that this time is also rotated by 45 degrees. skewing to make a rhombus out of our rectangle, the skewx() and skewy() transformations are available. each one takes an angle that determines how far the element will be skewed. scaling scale() changes the size of an element. it takes two numbers, the first being the x scale factor and the second being the y scale factor. the factors are taken as the ratio of the transformed dimension to the original. for example, 0.5 shrinks by 50%. if the second number is omitted, it is assumed to be equal to the first. complex transformations with matrix() all the above transformations can be exp...
...orm documentation. detailed information about this property can be found in the svg recommendation. effects on coordinate systems when using transformations you establish a new coordinate system inside the element the transformations apply to. that means, the units you specify for the element and its children might not follow the 1:1 pixel mapping, but are also distorted, skewed, translated and scaled according to the transformation. <svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g> </svg> the resulting rectangular in the above example will be 100x100px. the more intriguing effects arise, when you rely on attributes like userspaceonuse and the such. embedding svg in svg in contrast to html, svg allows you to embed other svg ele...

Filter effects - SVG: Scalable Vector Graphics
rsion="1.1"> <defs> <!-- filter declaration --> <filter id="myfilter" filterunits="userspaceonuse" x="0" y="0" width="200" height="120"> <!-- offsetblur --> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> <!-- litpaint --> <fespecularlighting in="blur" surfacescale="5" specularconstant=".75" specularexponent="20" lighting-color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> <fecomposite in="specout" in2="sourcealpha" operator="in" result="specout"/> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" ...
...porary buffer named "blur". step 2 <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> <feoffset> takes in "blur", which we previously created, shifts the result 4 to the right and 4 to the bottom, and stores the result in the buffer "offsetblur". the two first primitives just created a drop shadow. step 3 <fespecularlighting in="offsetblur" surfacescale="5" specularconstant=".75" specularexponent="20" lighting-color="#bbbbbb" result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> <fespecularlighting> takes in "offsetblur", generates a lighting effect, and stores the result in the buffer "specout". step 4 <fecomposite in="specout" in2="sourcealpha" operator=...

SVG and CSS - SVG: Scalable Vector Graphics
"m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(342)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> </g> <g id="inner-petals" transform="rotate(9) scale(0.33)"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a...
...the stylesheet only modifies the display in certain ways. this is also true for html and xul documents. but you can use css for general-purpose xml documents, where there is no predefined way to display the elements. the next page demonstrates this: xml data ...

package.json - Archive of obsolete content
u can generate the url to your add-on icon in the data directory using the url format below, where "your-addon-name" is the value in the name field of package.json. resource://@your-addon-name/data/your-icon-name.png this value will be used as the add-on's em:iconurl element in its install.rdf. the icon may be up to 48x48 pixels in size. a larger icon will work, but may either scaled and possibly distorted) or might break parts of firefox ui. (if you test this, please add the result here.) this can also be an object with the image size as key and the (absolute) location of the image as value. jpm looks for the sizes 64, 48 and 32. icon64 note: this is deprecated along with cfx; it's not available when using jpm. the path to an image c...

Chapter 1: Introduction to Extensions - Archive of obsolete content
ome.js both of these provide an environment for running user scripts (javascript) in firefox itself, where the scripts can target specific websites. adblock plus blocks the display of unwanted advertisements on web pages. all-in-one gestures adds mouse-gesture functionality. application level extensions fixme: update this. these are sophisticated extensions that can be considered full-scale applications in their own right, essentially using firefox as the development platform. one-trick gag extensions fixme: update this. there are a number of one-trick gag extensions that aren’t very useful. this is a very brief survey of a few extensions, but there are many other unique extensions available. table 1: advanced customization methods for firefox customization meth...

Adding Events and Commands - Archive of obsolete content
ayhello(event);" /> <!-- more commands. --> </commandset> <!-- more code here... --> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" command="xulschoolhello-hello-command" /> commands allow you to keep your javascript calls in a single place, avoiding code repetition and possible bugs. your ui can easily scale this way. you can create an extension that adds toolbar buttons, statusbar buttons and menu items, all with equivalent behavior, and without having to repeat lots of xul code in the process. commands and broadcasters also facilitate working with complex form windows and dialogs. you should always keep them in mind when adding the event-driven code for your extension. « previousnext » th...

The Box Model - Archive of obsolete content
e code in the skin section of the chrome. as their names should make clear, you can control the flexibility boundaries of elements, thus preventing them from growing or shrinking too much. all css properties involving lengths should be handled with caution. we recommended that you use proportional units (em, %) instead of absolute units (px) whenever possible. using the former allows the ui to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations. a common exception to this rule is when your css is directly related to images, where you'll usually handle measurements in pixels (px). also, just like in html, you can control the dimensions of inflexible elements using the width and height css properties and attributes. these at...

levelchange - Archive of obsolete content
tery interface event bubbles no cancelable no target batterymanager default action none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method. property type description batterymanager.level double (float) the system's battery charging level scaled from 0 to 1.0. returns 0 if the battery is empty and the system is about to suspend. returns 1.0 if the battery is full, if the implementation is unable to report the battery's level, or if there is no battery attached to the system. read only. example navigator.getbattery().then(function(battery) { console.log("battery level: " + battery.level * 100 + " %"); battery.addeventlisten...

Index - Archive of obsolete content
to declare the conditions in which the rule matches and the content that is generated. a rule may contain where, binding and/or action elements. a condition is defined used a where element. for each result that matches all of the conditions, content within the rule's action body is generated. the bindings element is optional and may specify additional variable bindings to be used. 1900 scale xul elements, xul reference a scale (sometimes referred to as a "slider") allows the user to select a value from a range. a bar displayed either horizontally or vertically allows the user to select a value by dragging a thumb on the bar. 1901 script xul elements, xul reference much like the html script element, this is used to declare a script to be used by the xul ...

Creating regular expressions for a microsummary generator - Archive of obsolete content
e these urls, we can create a second regular expression that matches them. as before, we should distinguish the components of the url which are unique to the item from those which are common to all auction item urls of this style. ...

Prism - Archive of obsolete content
is to use styling (or theming). prism supports a simple styling system that allows the user to add css files to the webapp bundle. scripting prism allows for some client-side web application customization. some simple objects and utilities are exposed to webapp scripts. host window prism provides a simple, scaled down browser window for running web applications. using configuration files and webapp scripting, the host window can be modified. installer installing prism. view all... community blog posts prism forum #prism on irc.mozilla.org goodies ...

New Skin Notes - Archive of obsolete content
width bug on preferences page. --dria css classes for feature and subfeature boxes, including required graphics. -- dria when will these fixes be on the live site? --nickolay 10:38, 31 aug 2005 (pdt) existing fixes should be on test/docs/ now. --dria stuff that's been fixed note that while i've made these fixes, they haven't necessarily been checked in yet. edit page textarea needs to 'scale' better with page width (so large whitespace area's are non-existant), suggest min-width:some-em-size; width: 88%; and max-width set to 95% or something like that. --callek i tried this, but it gets totally screwed up in ie for some reason. i'll try again, but can't guarantee this will be fixed for the initial upgrades. --dria took two days, but i finally got this sorted out. when the skin is u...

movetoclick - Archive of obsolete content
if false, clicking the slide area moves the thumb only one increment in that direction. ...

dir - Archive of obsolete content
« xul reference home dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). for other elements, they are placed right to left or bottom to top. this is reverse of the order in which they appear in the xul code. see also resizer.dir ...

max - Archive of obsolete content
« xul reference home type: integer the maximum value that the scale or number box may be set to. the default value is 100 for scales and infinity for number boxes. see also progressmeter.ma ...

Deprecated and defunct markup - Archive of obsolete content
(use menupopup) <package> (no longer present but in older documentation) <scrollbarbutton> (button at end of scrollbar; had been only within larger <scrollbar>) so, not deprecated, but internal use only? ...

Index - Archive of obsolete content
to declare the conditions in which the rule matches and the content that is generated. a rule may contain where, binding and/or action elements. a condition is defined used a where element. for each result that matches all of the conditions, content within the rule's action body is generated. the bindings element is optional and may specify additional variable bindings to be used. 1169 scale xul elements, xul reference a scale (sometimes referred to as a "slider") allows the user to select a value from a range. a bar displayed either horizontally or vertically allows the user to select a value by dragging a thumb on the bar. 1170 script xul elements, xul reference much like the html script element, this is used to declare a script to be used by the xul ...

accessibleType - Archive of obsolete content
xullistheader 1025 xullistitem 100c xulmenubar 100d xulmenuitem 100e xulmenupopup 100f xulmenuseparator 1010 xulpane 1011 xulprogressmeter 1012 xulscale 1013 xulstatusbar 1014 xulradiobutton 1015 xulradiogroup 1016 xultab 1017 xultabbox 1018 xultabs 1019 xultext 101a xultextbox 101b ...

XUL element attributes - Archive of obsolete content
ute to 'rdf:null'. this will make the element so that its contents can be generated from a datasource. otherwise, you cannot add one later. when the xul document is contained on a remote web site, the datasources may only be loaded from the same domain as the document. dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). for other elements...

XUL controls - Archive of obsolete content
gned to display fixed size rows, the richlistbox may display any type of content. <richlistbox> <richlistitem> <image src="happy.png"/> </richlistitem> <richlistitem> <image src="sad.png"/> </richlistitem> <richlistitem> <image src="angry.png"/> </richlistitem> </richlistbox> richlistbox reference related elements: richlistitem <scale> a scale displays a bar with a thumb that may be slid across the bar to select between a range of values. <scale min="1" max="10"/> scale reference <splitter> allows the user to adjust the division of space between elements. <splitter collapse="before"> <grippy/> </splitter> splitter reference related elements: grippy ...

button - Archive of obsolete content
able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). for other elements...

scrollbar - Archive of obsolete content
. attributes curpos, increment, maxpos, pageincrement examples <scrollbar curpos="5" maxpos="50"/> attributes curpos type: integer the current position of the scrollbar, which ranges from 0 to the value of the maxpos attribute. the default value is 0. increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). the default value is 1. maxpos type: integer the maximum position of the scrollbar. the default value is 100. pageincrement type: integer the amount by which the value of the curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when th...

toolbarbutton - Archive of obsolete content
able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). for other elements...

Introduction to Public-Key Cryptography - Archive of obsolete content
requirements are much more stringent. if you live in some other state or country, the requirements for various kinds of licenses will differ. similarly, different cas have different procedures for issuing different kinds of certificates. in some cases the only requirement may be your email address. in other cases, your unix or windows login and password may be sufficient. at the other end of the scale, for certificates that identify people who can authorize large expenditures or make other sensitive decisions, the issuing process may require notarized documents, a background check, and a personal interview. depending on an organization's policies, the process of issuing certificates can range from being completely transparent for the user to requiring significant user participation and comple...

XForms Range Element - Archive of obsolete content
/ 20. type restrictions the range element can be bound to a node of type xsd:duration, xsd:date, xsd:time, xsd:datetime, xsd:gyearmonth, xsd:gyear, xsd:gmonthday, xsd:gday, xsd:gmonth, xsd:float, xsd:decimal or xsd:double or any type derived from one of these. representations the xforms range element is represented by a slider widget (xhtml only). characteristics analogous widget is <xul:scale/>, which is available in fx 3.0 only if the incremental attribute has the value true, the value of the bound node will be updated upon each movement of the slider's thumb. ...

Index - Game development
the ball with. 55 randomizing gameplay 2d, beginner, canvas, games, javascript, phaser, tutorial you've finished all the lessons — congratulations! by this point you would have learnt the basics of phaser and the logic behind simple 2d games. 56 scaling 2d, beginner, canvas, games, javascript, phaser, tutorial scaling refers to how the game canvas will scale on different screen sizes. we can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later. 57 the score 2d, beginner, canvas, games, javascript, phaser, tutorial, scoring having a score can also make the game more interesting — you can try to beat your own highscore, or your friend's. in this article we'...

Introduction to game development for the Web - Game development
lets you lock the mouse or other pointing device within your game's interface so that instead of absolute cursor positioning you receive coordinate deltas that give you more precise measurements of what the user is doing, and prevent the user from accidentally sending their input somewhere else, thereby missing important action. svg (scalable vector graphics) lets you build vector graphics that scale smoothly regardless of the size or resolution of the user's display. typed arrays javascript typed arrays give you access to raw binary data from within javascript; this lets you manipulate gl textures, game data, or anything else, even if it's not in a native javascript format. web audio api this api for controlling the playback, synthesis, and manipulation of audio from javascript code lets...

Square tilemaps implementation: Static maps - Game development
contain all of the tile images. this is the atlas we will be using as an example, which features five different tiles: to draw a tile from the atlas into the canvas we make use of the drawimage() method in a canvas 2d context. we need to supply the atlas image, the coordinates and dimensions of the tile inside the atlas, and the target coordinates and size (a different tile size in here would scale the tile.) so, for instance, to draw the tree tile, which is the third in the atlas, at the screen coordinates (128, 320), we would call drawimage() with these values: context.drawimage(atlasimage, 192, 0, 64, 64, 128, 320, 64, 64); in order to support atlases with multiple rows and columns, you would need to know how many rows and columns there are to be able to compute the source x and y. t...

Bézier curve - MDN Web Docs Glossary: Definitions of Web-related terms
the curve is defined by a set of control points with a minimum of two. web related graphics and animations use cubic béziers, which are curves with four control points p0, p1, p2, and p3. to draw the curve, two imaginary lines are drawn, one from p0 to p1 and the other from p1 to p2. the end points of the lines are then steadily moved to the next point. ...

Public-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
-key encryption systems an advantage over symmetric encryption systems in that the encryption key can be made public. anyone could encrypt a message to the owner of the private key, but only the owner of the private key could decrypt it. however, they are typically much slower than symmetric algorithms and the size of message they can encrypt is proportional to the size of the key, so they do not scale well for long messages. as a result, it's common for an encryption system to use a symmetric algorithm to encrypt the message, then a public-key system to encrypt the symmetric key. this arrangement can confer the benefits of both systems. commonly used public-key cryptosystems are rsa (for both signing and encryption), dsa (for signing) and diffie-hellman (for key agreement). ...

SVG - MDN Web Docs Glossary: Definitions of Web-related terms
mage format based on an xml syntax. the w3c began work on svg in the late 1990s, but svg only became popular when internet explorer 9 came out with svg support. all major browsers now support svg. based on an xml syntax, svg can be styled with css and made interactive using javascript. html5 now allows direct embedding of svg tags in an html document. as a vector image format, svg graphics can scale infinitely, making them invaluable in responsive design, since you can create interface elements and graphics that scale to any screen size. svg also provides a useful set of tools, such as clipping, masking, filters, and animations. learn more general knowledge svg on wikipedia learning svg w3.org's svg primer technical information svg documentation on mdn latest svg specificatio...

Visual Viewport - MDN Web Docs Glossary: Definitions of Web-related terms
the portion of the viewport that is currently visible is called the visual viewport. this can be smaller than the layout viewport, such as when the user has pinched-zoomed. the visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page. learn more general knowledge visual viewport api viewport on wikipedia a tale of two viewports (quirksmode) viewport in the mdn glossary layout viewport in the mdn glossary ...

Advanced styling effects - Learn web development
here are some creative things you can do. one very nice property, which can help you bring interest to your designs, is the filter property. this property enables photoshop-like filters right from css. in the example below we have used two different values for filter. the first is blur() — this function can be passed a value to indicate how much the image should be blurred. the second is grayscale(); by using a percentage we are setting how much color we want to be removed. play with the percentage and pixel parameters in the live example to see how the images change. you could also swap the values for some others. try contrast(200%), invert(100%) or hue-rotate(20deg) on the live example below. take a look at the mdn page for filter for many other options you could try. you can apply f...

Backgrounds and borders - Learn web development
th these, using any available <color> value. background images the background-image property enables the display of an image in the background of an element. in the example below, we have two boxes — one has a background image which is larger than the box, the other has a small image of a star. this example demonstrates two things about background images. by default, the large image is not scaled down to fit the box, so we only see a small corner of it, whereas the small image is tiled to fill the box. in this case, the actual image is just a single star. if you specify a background color in addition to a background image then the image displays on top of the color. try adding a background-color property to the example above to see that in action. controlling background-repeat the b...

Images, media, and form elements - Learn web development
. the object-fit property can help you here. when using object-fit the replaced element can be sized to fit a box in a variety of ways. below we have used the value cover, which sizes the image down, maintaining the aspect ratio so that it neatly fills the box. as the aspect ratio is maintained some parts of the image will be cropped by the box. if we use contain as a value the image will be scaled down until it is small enough to fit inside the box. this will result in "letterboxing" if it is not the same aspect ratio as the box. you could also try the value of fill, which will fill the box but not maintain the aspect ratio. replaced elements in layout when using various css layout techniques on replaced elements, you may well find that they behave slightly differently to other element...

Test your skills: Images and Form elements - Learn web development
ou can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one in this task, you have an image that is overflowing the box. we want the image to scale down to fit inside the box without any extra white space, but we do not mind if some part of the image is cropped. in the example below see if you can match the image above. for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task two in this task, you have a simple form. your task is to make the following...

CSS values and units - Learn web development
for example we don't typically use cm (centimeters) on screen. the only value that you will commonly use is px (pixels). relative length units relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. the benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scale relative to everything else on the page. some of the most useful units for web development are listed in the table below. unit relative to em font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width. ex x-height of the element's font. ch the ...

create fancy boxes - Learn web development
css box is turned into a blank canvas you'll fill. before we jump to some practical examples, let's step back a bit as there are two things you should know about backgrounds. it's possible to set several backgrounds on a single box. they are stacked on top of each other like layers. backgrounds can be either solid colors or images: solid color always fills the whole surface but images can be scaled and positioned. <div class="fancy">hi! i want to be fancy.</div> okay, let's have fun with backgrounds: .fancy { padding : 1em; width: 100%; height: 200px; box-sizing: border-box; /* at the bottom of our background stack, let's have a misty grey solid color */ background-color: #e4e4d9; /* we stack linear gradients on top of each other to create our color strip ef...

How does the Internet work? - Learn web development
ich in turn forwards the message to computer b and makes sure the message is not delivered to computer c. once we add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs. a network of networks so far so good. but what about connecting hundreds, thousands, billions of computers? of course a single router can't scale that far, but, if you read carefully, we said that a router is a computer like any other, so what keeps us from connecting two routers together? nothing, so let's do that. by connecting computers to routers, then routers to routers, we are able to scale infinitely. such a network comes very close to what we call the internet, but we're missing something. we built that network for our own pu...

How to build custom form controls - Learn web development
handle when the list of options is hidden. this is necessary in order to manage the differences between the active state and the open state that do not exactly match. .select .optlist.hidden { /* this is a simple way to hide the list in an accessible way; we will talk more about accessibility in the end */ max-height: 0; visibility: hidden; } note: we could also have used transform: scale(1, 0) to give the optionlist no height and full width. beautification so now that we have the basic functionality in place, the fun can start. the following is just an example of what is possible, and will match the screenshot at the beginning of this article. however, you should feel free to experiment and see what you can come up with. .select { /* the computations are made assuming 1em =...

Adding vector graphics to the Web - Learn web development
oom in because it contains information on where each pixel should be (and what color). when it is zoomed, each pixel is simply increased in size to fill multiple pixels on screen, so the image starts to look blocky. the vector image however continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values simply being scaled as it gets bigger. note: the images above are actually all pngs — with the left-hand star in each case representing a raster image, and the right-hand star representing a vector image. again, go to the vector-versus-raster.html demo for a real example! moreover, vector image files are much lighter than their raster equivalents, because they only need to hold a handful of algorithms, ra...

Responsive images - Learn web development
upon the device accessing the data on the website. to make things more complicated, some devices have high resolution screens that need larger images than you might expect to display nicely. this is essentially the same problem, but in a slightly different context. you might think that vector images would solve these problems, and they do to a certain degree — they are small in file size and scale well, and you should use them wherever possible. however, they aren't suitable for all image types. vector images are great for simple graphics, patterns, interface elements, etc., but it starts to get very complex to create a vector-based image with the kind of detail that you'd find in say, a photo. raster image formats such as jpegs are more suited to the kind of images we see in the above exa...

Multimedia and Embedding - Learn web development
lements. <iframe>s are for embedding other web pages, and the other two allow you to embed pdfs, svg, and even flash — a technology on its way out, but which you may still see semi-regularly. adding vector graphics to the web vector graphics can be very useful in certain situations. unlike regular formats like png/jpg, they don't distort/pixelate when zoomed in — they can remain smooth when scaled. this article introduces you to what vector graphics are and how to include the popular svg format in web pages. responsive images in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them. this helps to improve ...

Index - Learn web development
, multicol, typography responsive design refers to a site or application design that responds to the environment in which it is viewed. it encompasses a number of css and html features and techniques and is now essentially just how we build websites by default. consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. this is because the web has moved to this approach of designing responsively. 152 supporting older browsers beginner, css, guide, layout, learn, feature queries, flexbox, float, grid, legacy you now have the knowledge to confidently use techniques such as grid and flexbox, create fallbacks for older browsers, and mak...

Introduction to web APIs - Learn web development
. apis for drawing and manipulating graphics are now widely supported in browsers — the most popular ones are canvas and webgl, which allow you to programmatically update the pixel data contained in an html <canvas> element to create 2d and 3d scenes. for example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the canvas api, or create a complex 3d scene with lighting and textures using webgl. such apis are often combined with apis for creating animation loops (such as window.requestanimationframe()) and others to make constantly updating scenes like cartoons and games. audio and video apis like htmlmediaelement, the web audio api, and webrtc allow you to do really interesting things with multim...

Introduction to the server side - Learn web development
it is so useful?". after reading this article you'll understand the additional power available to websites through server-side coding. prerequisites: basic computer literacy. a basic understanding of what a web server is. objective: to gain familiarity with what server-side programming is, what it can do, and how it differs from client-side programming. most large-scale websites use server-side code to dynamically display different data when needed, generally pulled out of a database stored on a server and sent to the client to be displayed via some code (e.g. html and javascript). perhaps the most significant benefit of server-side code is that it allows you to tailor website content for individual users. dynamic sites can highlight content that is more relev...

Introduction to client-side frameworks - Learn web development
puters. these modern, complex, interactive websites are often referred to as web applications. the advent of modern javascript frameworks has made it much easier to build highly dynamic, interactive applications. a framework is a library that offers opinions about how software gets built. these opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software. javascript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day. mdn web docs, which you are currently reading this on, uses the react/reactdom framework to power its front end. what fr...

TypeScript support in Svelte - Learn web development
maintain more code. no replacement for automatic tests: even though types might help you catch several bugs, typescript is not a true replacement for a comprehensive suite of automated tests. boiler plate code: working with types, classes, interfaces, and generics can lead to over-engineered code bases. there seems to be a broad consensus that typescript is particularly well suited for large-scale projects, with many developers working on the same code base. and it is indeed being used by several large-scale projects, like angular 2, vue 3, ionic, visual studio code, jest and even the svelte compiler. nevertheless, some developers prefer to use it even on small projects like the one we are developing. in the end, it's your decision. in the following sections we hope to give you more evide...

Getting started with Svelte - Learn web development
the markup and <script> section of every component and stores the result in public/build/bundle.js. it also adds the code in src/main.js to reference the features of each component. ...

Working with Svelte stores - Learn web development
d different — let's add an animation to our alerts. svelte provides a whole module to define transitions and animations so we can make our user interfaces more appealing. a transition is applied with the transition:fn directive, and is triggered by an element entering or leaving the dom as a result of a state change. the svelte/transition module exports seven functions: fade, blur, fly, slide, scale, draw, and crossfade. let's give our alert component a fly transition. we'll open the alert.svelte file and import the fly function from the svelte/transition module. put the following import statement below the existing ones: import { fly } from 'svelte/transition' to use it, update your opening <div> tag like so: <div role="alert" on:click={() => visible = false} transition...

Vue conditional rendering: editing existing todos - Learn web development
newlabel: this.label }; }, methods: { onsubmit() { if (this.newlabel && this.newlabel !== this.label) { this.$emit("item-edited", this.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { display: inline-block; margin-top: 0.4rem; width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } form { display: flex; flex-direction: row; flex-wrap: wrap; } form > * { flex: 0 0 100%; } </style> note: walk through the above code then read the below description to make sure ...

SVG Guidelines
ce the larger the dimensions the more pixel data the file needs to store. at very small dimensions (the extreme case being 1px x 1px) the raster file will likely be much smaller than the svg file since it only needs to store one pixel of data. at large dimensions the raster file may be much larger than the svg file. scalability, with caveats one of the primary advantages of svg is that as it is scaled it does not pixelate. however, this is not to say that it always does away with the need to have a collection of raster images for display at different scales. this can be particularly true for icons. while svg may scale well enough for flat-ish icons without a lot of detail, for icons that try to pack in a lot of detail graphic artists generally want to be able to pixel tweak. performance whi...

HTMLIFrameElement.getScreenshot()
the image will be cropped if necessary but will not be distorted vertically or horizontally. note: getscreenshot() waits for the event loop to go idle before it takes the screenshot. it won't wait more than 2000ms (this delay is defined by the gecko dom.browserelement.maxscreenshotdelayms preference). ...

Extras
</mtr> </mtable> <mo>)</mo> </mrow> </math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion path="m 32,69 c 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo>...

Fonts for Mozilla 2.0's MathML engine
or part glyphs do not in general have unicode assignments, and so font-specific support is required for some characters. mozilla has general support for the common delimiters and arrows that have the necessary unicode assignments. for other characters, mozilla has font-specific support. in general, if the necessary glyphs are not available on the system then mozilla tries to stretch symbols using scale transforms, but that may result in a less pleasant rendering. to see mathml as intended, you need sufficient font support, which may mean installing some fonts. note that some web sites may provide the required mathematical fonts as web fonts. in that case, you will see the correct rendering on these pages if you use gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) or greater. recomm...

Mozilla projects on GitHub
e to the code, or to fork it and start your own project based on mozilla-related code—you need a github account. to learn more about setting up a github account, visit the github website. most mozilla project code is located in repositories within the mozilla github organization. this is a great place to start looking for any projects not listed below. projects this listing covers the larger-scale and more important mozilla projects on github. it does not include everything since it's hard to keep track of all the smaller projects. look to github for the most complete list of mozilla projects on github. project name description pdf.js a portable document format (pdf) reader written entirely in javascript. shumway shumway is a flash vm and runtime wr...

Renaming With Pork
these notes are based on tools pork refactoring toolchain [required]. see installing pork. filterdiff from patchutils renaming a class 1. ...

JSAPI User Guide
ags option. the example below defines a very basic jsclass (named global_class) with no methods or properties of its own. use js_newglobalobject to create a global object. use js_initstandardclasses to populate it with the standard javascript globals. this may seem like a lot of pieces for a simple application. it amounts to about 80 lines of code, as shown below. but the jsapi is designed to scale to applications that need many global objects. it is a fine-grained api, supporting many different combinations of the parts, and giving applications precise control over how spidermonkey behaves. here is the boilerplate code necessary for a minimal jsapi application. it contains everything described above. #include "jsapi.h" using namespace js; // the class of the global object. static jscla...

Animated PNG graphics
mber of the animation chunk, starting from 0. 4 frame_data x bytes frame data for this frame. each frame inherits every property specified by any critical or ancillary chunks before the first 'idat' in the file, except the width and height, which come from the 'fctl' chunk. if the png 'phys' chunk is present, the apng images and their x_offset and y_offset values must be scaled in the same way as the main image. conceptually, such scaling occurs while mapping the output buffer onto the canvas. revisions to this specification from 0.1 renamed chunks to 'anim' and 'fram' to comply with chunk naming conventions in the png spec. added a more detailed explanation of apng structure in section 2. added information for png interaction with other chunks in section ...

Index
about the application such as its name or version. 164 iaccessiblecomponent interfaces, xpcom, xpcom interface reference this interface provides the standard mechanism for an assistive technology to retrieve information concerning the graphical representation of an object. coordinates used by the functions of this interface are specified in different coordinate systems. their scale is the same and is equal to that of the screen coordinate system. in other words all coordinates are measured in pixels. they differ in their respective origin: 165 iaccessibleeditabletext interfaces, xpcom, xpcom interface reference this interface is typically used in conjunction with the iaccessibletext interface and complements that interface with the additional capability...

IAccessibleComponent
n be rendered on the screen. 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this interface provides the standard mechanism for an assistive technology to retrieve information concerning the graphical representation of an object. coordinates used by the functions of this interface are specified in different coordinate systems. their scale is the same and is equal to that of the screen coordinate system. in other words all coordinates are measured in pixels. they differ in their respective origin: the screen coordinate system has its origin in the upper left corner of the current screen. the origin of the parent coordinate system is the upper left corner of the parent's bounding box. with no parent the screen coordinate system is ...

nsIAccessibleRole
:progressmeter, role="progressbar". role_dial 49 represents a dial or knob whose purpose is to allow a user to set a value. role_hotkeyfield 50 represents a hot-key field that allows the user to enter a combination or sequence of keystrokes. role_slider 51 represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values. it is used by xul:scale, role="slider", xforms:range. role_spinbutton 52 represents a spin box, which is a control that allows the user to increment or decrement the value displayed in a separate "buddy" control associated with the spin box. it is used for xul:spinbuttons. role_diagram 53 represents a graphical image used to diagram data. it is used for svg:svg. role_animation 54 represents an animation control, w...

nsIDOMWindow
s are shown in the window. this attribute is "replaceable" in javascript. read only. sessionstorage nsidomstorage session storage for the current browsing context. data stored in session storage may be accessed by any site in the browsing context. read only.note: prior to gecko 8.0 this attribute was part of nsidomstoragewindow. textzoom float get or set the document scale factor as a multiplier of the default size. when setting this attribute, an ns_error_not_implemented error may be returned by implementations not supporting zoom. this attribute should always return 1.0 for implementations not supporting text zoom. 1.0 represents normal (unzoomed) size. native code only! top nsidomwindow the root window for the hierarchy of windows that contain thi...

nsIDocShell
securityui nsisecurebrowserui the securebrowserui object for this docshell. this is set by browser or nswebbrowser for their root docshell. shouldsavelayoutstate boolean indicates whether the current page can be cached. read only. useerrorpages boolean attribute to access whether error pages are enabled. zoom float set/get the document scale factor. when setting this attribute, a ns_error_not_implemented error may be returned by implementations not supporting zoom. implementations not supporting zoom should return 1.0 all the time for the get operation. 1.0 by the way is the default of zoom. this means 100% of normal scaling or in other words normal size no zoom. constants constant value description inte...

Edit Shape Paths in CSS - Firefox Developer Tools
anywhere on a line of the shape and you will get a new point to adjust. double click on an existing point and it will be removed. remember that a polygon needs at least three points. moving and scaling shapes there is extra functionality available on the shape highlight — if you ctrl/cmd + click on the shapes icon for your shape the highlight will change, instead providing the ability to scale and/or move it. once again, clipping will occur if you exceed the bounds of the margin box. if your shape is a polygon, you also get the ability to rotate it around an axis. browser support the shape path editor currently works for shapes generated via clip-path; it will also work for shapes generated via shape-outside as of firefox 62. ...

Animation inspector example: CSS transitions - Firefox Developer Tools
<div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacit...

AnalyserNode.getByteFrequencyData() - Web APIs
each item in the array represents the decibel value for a specific frequency. the frequencies are spread linearly from 0 to 1/2 of the sample rate. for example, for 48000 sample rate, the last item of the array will represent the decibel value for 24000 hz. if the array has fewer elements than the analysernode.frequencybincount, excess elements are dropped. ...

AudioParam.setValueCurveAtTime() - Web APIs
the setvaluecurveattime() method of the audioparam interface schedules the parameter's value to change following a curve defined by a list of values. the curve is a linear interpolation between the sequence of values defined in an array of floating-point values, which are scaled to fit into the given interval starting at starttime and a specific duration. syntax var paramref = param.setvaluecurveattime(values, starttime, duration); parameters values an array of floating-point numbers representing the value curve the audioparam will change through along the specified duration. every value in the array must be a finite number; if any value is nan, infinity, or -infinity, a typeerror exception is thrown. starttime a double representing the time (in seconds) after the audiocontext was fir...

AudioParam - Web APIs
e of the audioparam. the change starts at the time specified in starttime and exponentially moves towards the value given by the target parameter. the exponential decay rate is defined by the timeconstant parameter, which is a time measured in seconds. audioparam.setvaluecurveattime() schedules the values of the audioparam to follow a set of values, defined by an array of floating-point numbers scaled to fit into the given interval, starting at a given start time and spanning a given duration of time. audioparam.cancelscheduledvalues() cancels all scheduled future changes to the audioparam. audioparam.cancelandholdattime() cancels all scheduled future changes to the audioparam but holds its value at a given time until further changes are made using other methods. examples first, a basi...

Background Tasks API - Web APIs
nd when we're done adding content to it. next, we update the progress and status information if any tasks have been enqueued. if the current maximum value of the progress bar is different from the current total number of enqueued tasks (totaltaskcount), then we update the contents of the displayed total number of tasks (totaltaskcountelem) and the maximum value of the progress bar, so that it scales properly. we do the same thing with the number of tasks processed so far; if progressbarelem.value is different from the task number currently being processed (currenttasknumber), then we update the displayed value of the currently-being-processed task and the current value of the progress bar. then, if there's text waiting to be added to the log (that is, if logfragment isn't null), we appen...

BatteryManager.level - Web APIs
a value of 0 means the battery, which is a batterymanager object, is empty and the system is about to be suspended. a value of 1.0 means the battery is full. a value of 1.0 is also returned if the implementation isn't able to determine the battery charge level or if the system is not battery-powered. ...

BatteryManager - Web APIs
only a number representing the remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged. batterymanager.dischargingtime read only a number representing the remaining time in seconds until the battery is completely discharged and the system will suspend. batterymanager.level read only a number representing the system's battery charge level scaled to a value between 0.0 and 1.0. event handlers batterymanager.onchargingchange a handler for the chargingchange event; this event is sent when the battery charging state is updated. batterymanager.onchargingtimechange a handler for the chargingtimechange event; this event is sent when the battery charging time is updated batterymanager.ondischargingtimechange a handler for the discharg...

CSSStyleValue.parse() - Web APIs
ore values to apply to the provided property. return value a cssstylevalue object containing the first supplied value. example the code below parses a set of declarations for the transform property. the second code block shows the structure of the returned object as it would be rendered in a developer tools console. const css = cssstylevalue.parse( 'transform', 'translate3d(10px,10px,0) scale(0.5)'); csstransformvalue {0: csstranslate, 1: cssscale, length: 2, is2d: false} specifications specification status comment css typed om level 1the definition of 'parse()' in that specification. working draft initial definition. ...

Determining the dimensions of elements - Web APIs
ht properties. most of the time these are the same as width and height of element.getboundingclientrect(), when there aren't any transforms applied to the element. in case of transforms, the offsetwidth and offsetheight returns the element's layout width and height, while getboundingclientrect() returns the rendering width and height. as an example, if the element has width: 100px; and transform: scale(0.5); the getboundingclientrect() will return 50 as the width, while offsetwidth will return 100. what's the size of the displayed content? if you need to know how much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars, you want to use the element.clientwidth and element.clientheight properties: how big is the content? if y...

CSS Object Model (CSSOM) - Web APIs
ecifications: document, window, element, htmlelement, htmlimageelement, range, mouseevent, and svgelement. ...

CanvasRenderingContext2D.drawWindow() - Web APIs
r). it is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background. with this method, it is possible to fill a hidden iframe with arbitrary content (e.g., css-styled html text, or svg) and draw it into a canvas. it will be scaled, rotated and so on according to the current transformation. ted mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference. specifications not part of any current specification or draft. this is a non-standard and internal only api. ...

CanvasRenderingContext2D.fillText() - Web APIs
nate of the point at which to begin drawing the text, in pixels. maxwidth optional the maximum number of pixels wide the text may be once rendered. if not specified, there is no limit to the width of the text. however, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font size in order to fit the text in the specified width. return value undefined. examples drawing filled text this example writes the words "hello world" using the filltext() method. html first, we need a canvas to draw into. this code creates a context 400 pixels wide and 150 pixels across. <canvas id="canvas" width="400" height="150"></canvas> javascript the java...

CanvasRenderingContext2D.filter - Web APIs
<offset-x>: see <length> for possible units. specifies the horizontal distance of the shadow. <offset-y>: see <length> for possible units. specifies the vertical distance of the shadow. <blur-radius>: the larger this value, the bigger the blur, so the shadow becomes bigger and lighter. negative values are not allowed. <color>: see <color> values for possible keywords and notations. grayscale() a css <percentage>. converts the drawing to grayscale. a value of 100% is completely grayscale. a value of 0% leaves the drawing unchanged. hue-rotate() a css <angle>. applies a hue rotation on the drawing. a value of 0deg leaves the input unchanged. invert() a css <percentage>. inverts the drawing. a value of 100% means complete inversion. a value of 0% leaves the drawing unchanged. opac...

CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
i, lets you set the quality of image smoothing. note: for this property to have an effect, imagesmoothingenabled must be true. syntax ctx.imagesmoothingquality = "low" || "medium" || "high" options possible values: "low" low quality. "medium" medium quality. "high" high quality. example setting image smoothing quality this example uses the imagesmoothingquality property with a scaled image. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { ctx.imagesmoothingquality = 'low'; ctx.drawimage(img, 0, 0, 300, 150); }; result specifications specificati...

CanvasRenderingContext2D.setTransform() - Web APIs
note: see also the transform() method; instead of overriding the current transform matrix, it multiplies it with a given one. ...

CanvasRenderingContext2D.strokeText() - Web APIs
ext. y the y-axis coordinate of the point at which to begin drawing the text. maxwidth optional the maximum width the text may be once rendered. if not specified, there is no limit to the width of the text. however, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font size in order to fit the text in the specified width. return value undefined. examples drawing text outlines this example writes the words "hello world" using the stroketext() method. html first, we need a canvas to draw into. this code creates a context 400 pixels wide and 150 pixels high. <canvas id="canvas" width="400" height="150"></canvas> javascript the ...

CanvasRenderingContext2D.transform() - Web APIs
note: see also the settransform() method, which resets the current transform to the identity matrix and then invokes transform(). syntax void ctx.transform(a, b, c, d, e, f); the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters a (m11) horizontal scaling. ...

Basic usage of canvas - Web APIs
difference being that it doesn't have the src and alt attributes. indeed, the <canvas> element has only two attributes, width and height. these are both optional and can also be set using dom properties. when no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. the element can be sized arbitrarily by css, but during rendering the image is scaled to fit its layout size: if the css sizing doesn't respect the ratio of the initial canvas, it will appear distorted. note: if your renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not using css. the id attribute isn't specific to the <canvas> element but is one of the global html attributes which can be applied to any html ...

Compositing and clipping - Web APIs
arc and calling clip(). clipping paths are also part of the canvas save state. if we wanted to keep the original clipping path we could have saved the canvas state before creating the new one. everything that's drawn after creating the clipping path will only appear inside that path. you can see this clearly in the linear gradient that's drawn next. after this a set of 50 randomly positioned and scaled stars is drawn, using the custom drawstar() function. again the stars only appear inside the defined clipping path. screenshotlive sample « previousnext » ...

Drawing shapes with canvas - Web APIs
l on the canvas. the origin of this grid is positioned in the top left corner at coordinate (0,0). all elements are placed relative to this origin. so the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default. drawing rectangles unlike svg, <canvas> only supports two primitive shapes: rectangles and paths (lists of points connected by lines). all other shapes must be created by combining one or more paths. luckily, we have an assortment of path drawing functions which make it possible to compose very complex shapes. first let's look at the rectangle. there...

Finale - Web APIs
g to make it possible to develop better and more powerful games that can be run in any standards-compliant web browser. other web apis these apis might be useful when working further with canvas and graphics: webgl advanced api for rendering complex graphics, including 3d. svg scalable vector graphics let you describe images as sets of vectors (lines) and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn. web audio the web audio api provides a powerful and versatile system for controlling audio on the web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more. questions stack overflow questions tagged with "canvas". comments about this tu...

ConvolverNode() - Web APIs
meters from the audionodeoptions dictionary. context a reference to an audiocontext. options optional options are as follows: audiobuffer: a mono, stereo, or 4-channel audiobuffer containing the (possibly multichannel) impulse response used by the convolvernode to create the reverb effect. disablenormalization: a boolean controlling whether the impulse response from the buffer will be scaled by an equal-power normalization, or not. the default is 'false'. return value a new convolvernode object instance. exceptions exception explanation notsupportederror the referenced audiobuffer does not have the correct number of channels, or it has a different sample rate to the associated audiocontext. specifications specification status ...

ConvolverNode.normalize - Web APIs
its default value is true in order to achieve a more uniform output level from the convolver, when loaded with diverse impulse responses. if normalize is set to false, then the convolution will be rendered with no pre-processing/scaling of the impulse response. changes to this value do not take effect until the next time the buffer attribute is set. ...

ConvolverNode - Web APIs
olvernode() creates a new convolvernode object instance. properties inherits properties from its parent, audionode. convolvernode.buffer a mono, stereo, or 4-channel audiobuffer containing the (possibly multichannel) impulse response used by the convolvernode to create the reverb effect. convolvernode.normalize a boolean that controls whether the impulse response from the buffer will be scaled by an equal-power normalization when the buffer attribute is set, or not. methods no specific method; inherits methods from its parent, audionode. convolvernode example the following example shows basic usage of an audiocontext to create a convolver node. note: you will need to find an impulse response to complete the example below. see this codepen for an applied example. let audioct...

EffectTiming.easing - Web APIs
element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including easing. the value of easing corresponds directly to animationeffecttimingreadonly.easing in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. ...

Element: dblclick event - Web APIs
oggles the size of a card when you double click on it. javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification. working draft document object model (dom) level 3 events specificationthe definition of 'dblclick' in that specification. obsolete ...

Element: msContentZoom event - Web APIs
it is a proprietary event specific to microsoft edge and internet explorer. zoomed elements can expose their zoom level through mscontentzoom (ie. scrolltop/left). the zoom level can be reset with element.mszoomto(). ...

HTMLElement: animationcancel event - Web APIs
="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcont...

HTMLElement: animationiteration event - Web APIs
="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcont...

HTMLElement: animationstart event - Web APIs
="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcont...

Key Values - Web APIs
) "videomodenext" [3] cycles through the available video modes. vk_video_mode_next gdk_key_next_vmode (0x1008fe22) "wink" causes the device to identify itself in some fashion, such as by flashing a light, briefly changing the brightness of indicator lights, or emitting a tone. vk_wink "zoomtoggle" [2] toggles between full-screen and scaled content display, or otherwise change the magnification level. vk_zoom (0xfb) qt::key_zoom (0x01020006) keycode_tv_zoom_mode (255) [1] don't confuse the media controller vk_apps key with the windows vk_apps key, which is also known as vk_context_menu. that key is encoded as "contextmenu". [2] internet explorer (tested on release 9 and 11) and firefox 36 and earlier identify t...

MediaImage - Web APIs
ediaimage dictionary describes the images associated with the media resource mediametadata. its contents can be displayed by the user agent in appropriate contexts, like player interface to show the current playing video or audio track. properties src the url from which user agent can fetch the image's data. sizes specifies the resource in multiple sizes so that user agent does not have to scale a single image. type the mime type hint for the user agant. note that it is just a hint so that user agent may ignore images of types it does not support; user agent still may use mime type sniffing after downloading the image to determine its type. specifications specification status comment media session standardthe definition of 'mediaimage' in that specificati...

MediaTrackControls.volume - Web APIs
s.volume as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { volume: constraint }; constraintsobject.volume = constraint; value a constraindouble describing the acceptable or required value(s) for an audio track's volume, on a linear scale where 0.0 means silence and 1.0 is the highest supported volume. if this value is a number, the user agent will attempt to obtain media whose volume is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact match to the required volume...

MediaTrackConstraints - Web APIs
ired. height a constrainlong specifying the video height or range of heights which are acceptable and/or required. width a constrainlong specifying the video width or range of widths which are acceptable and/or required. resizemode a constraindomstring object specifying a mode or an array of modes the ua can use to derive the resolution of a video track. allowed values are none and crop-and-scale. none means that the user agent uses the resolution provided by the camera, its driver or the os. crop-and-scale means that the user agent can use cropping and downscaling on the camera output in order to satisfy other constraints that affect the resolution. properties of shared screen tracks these constraints apply to mediatrackconstraints objects specified as part of the displaymediastreamc...

MediaTrackSettings - Web APIs
indicating the current value of the width property, specifying the width of the track's video data in pixels. resizemode a domstring indicating the current value of the resizemode property, specifying the mode used by the user agent to derive the resolution of the track. the value will be one of: "none" the track has the resolution offered by the camera, its driver or the os. "crop-and-scale" the track's resolution might be the result of the user agent using cropping or downscaling from a higher camera resolution. properties of shared screen tracks tracks containing video shared from a user's screen (regardless of whether the screen data comes from the entire screen or a portion of a screen, like a window or tab) are generally treated like video tracks, with the exception th...

RTCRtpContributingSource.audioLevel - Web APIs
ed in [rfc6465] if the rfc 6465 header extension is present, and otherwise null. syntax var audiolevel = rtcrtpcontributingsource.audiolevel value a double-precision floating-point number which indicates the volume level of the audio in the most recently received rtp packet from the source described by the rtcrtpcontributingsource. this value, which is in the range 0.0 to 1.0, is on a linear scale and its value is defined in dbov, or decibels (overload). this is the amplitude relative to the point at which clipping of the audio begins to occur. a value of 1.0 represents 0 dbov (maximum volume), a value of 0.0 represents silence, and a value of 0.5 represents approximately 6 db spl (decibels of sound pressure level) change in the sound pressure level from 0 dbov. for both rtcrtpcontributin...

RTCRtpSender.setParameters() - Web APIs
rder. an attempt has been made to alter a property that cannot be changed after the sender is first created. invalidstateerror the transceiver of which the rtcrtpsender is a part is not running, or has no parameters to set. operationerror any error condition which occurs that isn't covered by one of the other error codes results in an operationerror. rangeerror the value specified for scaleresolutiondownby is less than 1.0, which would result in scaling up rather than down, which is not allowed; or one or more of the specified encodings' maxframerate values is less than 0.0. in addition, if a webrtc error occurs while configuring or accessing the media, an rtcerror is thrown with its errordetail set to hardware-encoder-error. specifications specification status co...

ResizeObserverEntry.contentBoxSize - Web APIs
rder-radius.html (see source) example. this example includes a green box, sized as a percentage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size. const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.borderradius = math.min(100, (entry.contentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.target.style.borderradius = math.min(100, (en...

ResizeObserverEntry.target - Web APIs
rder-radius.html (see source) example. this example includes a green box, sized as a percentage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size. to grab a reference to the observed element so we can update its border-radius value after each change, we make use of the target property of each entry — entry.target.style.borderradius. const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.borderradius = math.min(100, (entry.contentbo...

Resize Observer API - Web APIs
radius.html (see source): a simple example with a green box, sized as a percentage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners, whereas the above solution gives you nice square corners that scale with the box size. resize-observer-text.html (see source): here we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <div> to change width. this shows that you can respond to changes in an element’s size, even if they have nothing to do with the viewport. the code will usually follow this kind of pattern (taken f...

SVGElement: zoom event - Web APIs
the zoom event occurs when the user initiates an action which causes the current view of the svg document fragment to be rescaled. bubbles yes cancelable no interface svgevent event handler property onzoom examples svgelem.addeventlistener('zoom', () => { console.log('svg zoomed.'); }) ...

SVGFEDiffuseLightingElement - Web APIs
a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes. svgfediffuselightingelement.in1 read only an svganimatedstring corresponding to the in attribute of the given element. svgfediffuselightingelement.surfacescale read only an svganimatednumber corresponding to the surfacescale attribute of the given element. svgfediffuselightingelement.diffuseconstant read only an svganimatednumber corresponding to the diffuseconstant attribute of the given element. svgfediffuselightingelement.kernelunitlengthx read only an svganimatednumber corresponding to the x component of the kernelunitlength attribute of the...

SVGFEDisplacementMapElement - Web APIs
s properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes. svgfedisplacementmapelement.in1 read only an svganimatedstring corresponding to the in attribute of the given element. svgfedisplacementmapelement.in2 read only an svganimatedstring corresponding to the in2 attribute of the given element. svgfedisplacementmapelement.scale read only an svganimatednumber corresponding to the scale attribute of the given element. svgfedisplacementmapelement.xchannelselector read only an svganimatedenumeration corresponding to the xchannelselect attribute of the given element. it takes one of the svg_channel_* constants defined on this interface. svgfedisplacementmapelement.ychannelselector read only an svganimatedenumeration ...

SVGFESpecularLightingElement - Web APIs
</svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes. svgfespecularlightingelement.in1 read only an svganimatedstring corresponding to the in attribute of the given element. svgfespecularlightingelement.surfacescale read only an svganimatednumber corresponding to the surfacescale attribute of the given element. svgfespecularlightingelement.specularconstant read only an svganimatednumber corresponding to the specularconstant attribute of the given element. svgfespecularlightingelement.specularexponent read only an svganimatednumber corresponding to the specularexponent attribute of the given element. ...

SVGMatrix - Web APIs
ponent of the matrix. methods svgmatrix.multiply() performs matrix multiplication. this matrix is post-multiplied by another matrix, returning the resulting new matrix as svgmatrix. svgmatrix.inverse() returns the inverse matrix as svgmatrix. svgmatrix.translate() post-multiplies a translation transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.scale() post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.scalenonuniform() post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.rotate() post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as svgmatrix...

Screen.mozBrightness - Web APIs
you can read and write this attribute even when the screen is disabled, but the backlight is off while the screen is disabled. if you write a value of x into this attribute, the attribute may not have the same value x when you later read it. most screens don't support as many different brightness levels as there are doubles between 0 and 1. the value's precision might be reduced before storing it. ...

Using readable streams - Web APIs
no explored it too deeply as of yet. we have created an example called unpack chunks of a png (see it live also) that fetches an image as a stream, then pipes it through to a custom png transform stream that retrieves png chunks out of a binary data stream. // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) // create a gray-scaled png stream out of the original .then(rs => logreadablestream('fetch response stream', rs)) .then(body => body.pipethrough(new pngtransformstream())) .then(rs => logreadablestream('png chunk stream', rs)) summary that explains the basics of “default” readable streams. we’ll explain bytestreams in a separate future article, once they are available in browsers. ...

Streams API - Web APIs
controllers are for byte streams. readablestreambyobrequest represents a pull into request in a readablebytestreamcontroller. examples we have created a directory of examples to go along with the streams api documentation — see mdn/dom-examples/streams. the examples are as follows: simple stream pump: this example shows how to consume a readablestream and pass its data to another. grayscale a png: this example shows how a readablestream of a png can be turned into grayscale. simple random stream: this example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again. simple tee example: this example extends the simple random stream example, showing how a stream can be teed and both resulting streams can be read independe...

Touch() - Web APIs
ey", optional and defaulting to 0, of type double, that is the vertical position of the touch on the client window of the user's screen, including any scroll offset. "radiusx", optional and defaulting to 0, of type float, that is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis indicated by rotationangle, in css pixels of the same scale as screenx; 0 if no value is known. the value must not be negative. "radiusy", optional and defaulting to 0, of type float, that is the the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by rotationangle, in css pixels of the same scale as screeny; 0 if no value is known. the value must not be negati...

Touch.radiusX - Web APIs
this value, in combination with touch.radiusy and touch.rotationangle constructs an ellipse that approximates the size and shape of the area of contact between the user and the screen. this may be a relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example. note: this attribute has not been formally standardized. ...

Touch.radiusY - Web APIs
this value, in combination with touch.radiusx and touch.rotationangle constructs an ellipse that approximates the size and shape of the area of contact between the user and the screen. this may be a large ellipse representing the contact between a fingertip and the screen or a small one representing the tip of a stylus, for example. note: this attribute has not been formally standardized. ...

Touch - Web APIs
s the element on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document. touch area touch.radiusx read only returns the x radius of the ellipse that most closely circumscribes the area of contact with the screen. the value is in pixels of the same scale as screenx. touch.radiusy read only returns the y radius of the ellipse that most closely circumscribes the area of contact with the screen. the value is in pixels of the same scale as screeny. touch.rotationangle read only returns the angle (in degrees) that the ellipse described by radiusx and radiusy must be rotated, clockwise, to most accurately cover the area of contact between the...

TouchEvent - Web APIs
e event. touchevent.touches read only a touchlist of all the touch objects representing all current points of contact with the surface, regardless of target or changed status. touchevent.rotation read only change in rotation (in degrees) since the event's beginning. positive values indicate clockwise rotation; negative values indicate anticlockwise rotation. initial value: 0.0 touchevent.scale read only distance between two digits since the event's beginning. expressed as a floating-point multiple of the initial distance between the digits at the beginning of the event. values below 1.0 indicate an inward pinch (zoom out). values above 1.0 indicate an outward unpinch (zoom in). initial value: 1.0 touch event types there are several types of event that can be fired to indicate th...

WebGLRenderingContext - Web APIs
certain behaviors. the interpretation of these hints depend on the implementation. webglrenderingcontext.isenabled() tests whether a specific webgl capability is enabled or not for this context. webglrenderingcontext.linewidth() sets the line width of rasterized lines. webglrenderingcontext.pixelstorei() specifies the pixel storage modes webglrenderingcontext.polygonoffset() specifies the scale factors and units to calculate depth values. webglrenderingcontext.samplecoverage() specifies multi-sample coverage parameters for anti-aliasing effects. webglrenderingcontext.stencilfunc() sets the both front and back function and reference value for stencil testing. webglrenderingcontext.stencilfuncseparate() sets the front and/or back function and reference value for stencil testing. we...

Color masking - Web APIs
color mask. this is an important aspect of the webgl state machine. it allows us to setup webgl in a single initialization phase, and then just execute drawing commands for each frame. color masking gives you fine control of updating pixel values on the screen. by limiting the color channels that are written by each drawing command, you can use each channel, for example, to store a different grayscale image. alternatively, you may use the rgb components for color, but the alpha component for some custom pixel data of your invention. finally, color masking teaches us that webgl is not only a state machine, it is also a graphics pipeline. this means that graphics operations in webgl are done in a certain order, where the output of each operation serves as the input of the next. so, for example,...

WebGL best practices - Web APIs
structions for builtins, and the compiler can't reliably replace your custom builtin-replacements with the special builtin codepaths. textures use mipmaps for any texture you'll see in 3d! when in doubt, call generatemipmaps() after texture uploads. ...

Taking still photos with WebRTC - Web APIs
a bit of text offering a link back to this page. the javascript code now let's take a look at the javascript code. we'll break it up into a few bite-sized pieces to make it easier to explain. initialization we start by wrapping the whole script in an anonymous function to avoid global variables, then setting up various variables we'll be using. (function() { var width = 320; // we will scale the photo width to this var height = 0; // this will be computed based on the input stream var streaming = false; var video = null; var canvas = null; var photo = null; var startbutton = null; those variables are: width whatever size the incoming video is, we're going to scale the resulting image to be 320 pixels wide. height the output height of the image will be compute...

Using bounded reference spaces - Web APIs
ace, which is sensible given the real-world implications otherwise. therefore, the bounded reference space's origin always places the y=0 plane at floor level. the boundary is then defined using an array of 2d coordinates, specifying only the x and z components since y is always 0. these points go around the room in a clockwise direction. note that if the underlying platform defines a fixed room-scale origin and boundary, it may initialize any uninitialized values to match that predefined information; this is not unexpected behavior for users of these platforms. the space inside the boundary is then the user's safe movement area, within which they are tracked and their movements replicated into the virtual world. although the user's xr system may provide automated detection and protection aga...

Movement, orientation, and motion: A WebXR example - Web APIs
ample will attempt to use the webxr polyfill even if the browser actually has support for webxr. if false, the polyfill is only used if the browser doesn't implement navigator.xr. session_type the type of xr session to create: inline for an inline session presented in the context of the document and immersive-vr to present the scene to an immersive vr headset. mouse_speed a multiplier used to scale the inputs from the mouse used for pitch and yaw control. move_distance the distance to move in response to any of the keys used to move the viewer through the scene. note: this example always displays what it renders on the screen, even if using immersive-vr mode. this lets you compare any differences in rendering between the two modes, and lets you see output from immersive mode even if yo...

Starting up and shutting down a WebXR session - Web APIs
as into which you intend to render your frames by calling the htmlcanvaselement method getcontext() on the target context. set up your webgl data and models and prepare to render the scene. set the webgl context as the source for the xr system by creating an xrwebgllayer and passing set the value of the session's renderstate property baselayer. perform calculations for the initial position and scale of your objects as needed. begin the frame rendering cycle. in basic form, code to do this final setup might look something like this: async function runsession(session) { let worlddata; session.addeventlistener("end", onsessionend); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); // set up webgl data and such worlddata =...

Using the Web Animations API - Web APIs
other animations. for instance, in the growing and shrinking alice game example, you might have noticed something odd about the cake’s duration: duration: alicechange.effect.getcomputedtiming().duration / 2 to understand what’s happening here, let’s take a look at alice’s animation: var alicechange = document.getelementbyid('alice').animate( [ { transform: 'translate(-50%, -50%) scale(.5)' }, { transform: 'translate(-50%, -50%) scale(2)' } ], { duration: 8000, easing: 'ease-in-out', fill: 'both' }); alice’s animation has her going from half her size to twice her size over 8 seconds. then we pause her: alicechange.pause(); if we had left her paused at the beginning of her animation, she’d start at half her full size, as if she’d drunk the entire bot...

Web audio spatialization basics - Web APIs
*math.sin(q); y = panner.orientationz.value*math.sin(q) + panner.orientationy.value*math.cos(q); x = panner.orientationx.value; panner.orientationx.value = x; panner.orientationy.value = y; panner.orientationz.value = z; break; } boombox.style.transform = 'translatex('+transform.xaxis+'px) translatey('+transform.yaxis+'px) scale('+transform.zaxis+') rotatey('+transform.rotatey+'deg) rotatex('+transform.rotatex+'deg)'; const move = prevmove || {}; move.frameid = requestanimationframe(() => moveboombox(direction, move)); return move; } wiring up our controls wiring up out control buttons is comparatively simple — now we can listen for a mouse event on our controls and run this function, as well as stop it whe...

XRWebGLLayer() - Web APIs
hich is true if anti-aliasing is to be used when rendering in the context; otherwise false. the browser selects the anti-aliasing method to use; there is no support for requesting a specific mode yet. the default value is true. depth optional a boolean value which, if true, requests that the new layer have a depth buffer; otherwise, no depth layer is allocated. the default is true. framebufferscalefactor optional a floating-point value which is used to scale the image during compositing, with a value of 1.0 represents the default pixel size for the frame buffer. the static xrwebgllayer function xrwebgllayer.getnativeframebufferscalefactor() returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution. the defau...

XRWebGLLayer - Web APIs
representing the position, width, and height to which the webgl context's viewport must be set to contain drawing to the area of the framebuffer designated for the specified view's contents. in this way, for example, the rendering of the left eye's point of view and of the right eye's point of view are each placed into the correct parts of the framebuffer. static methods getnativeframebufferscalefactor() returns the scaling factor that can be used to scale the resolution of the recommended webgl framebuffer resolution to the rendering device's native resolution. examples binding the layer to a webgl context this snippet, taken from drawing a frame in movement, orientation, and motion: a webxr example, shows how the xrwebgllayer is obtained from the xrsession object's rendering state ...

XRWebGLLayerInit - Web APIs
hich is true if anti-aliasing is to be used when rendering in the context; otherwise false. the browser selects the anti-aliasing method to use; there is no support for requesting a specific mode yet. the default value is true. depth optional a boolean value which, if true, requests that the new layer have a depth buffer; otherwise, no depth layer is allocated. the default is true. framebufferscalefactor optional a floating-point value which is used to scale the image during compositing, with a value of 1.0 represents the default pixel size for the frame buffer. the static xrwebgllayer function xrwebgllayer.getnativeframebufferscalefactor() returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution. the defau...

Color contrast - Accessibility
lor contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility. when designing readable interfaces for different vision capabilities, the wcag guidelines recommend the following contrast ratios: type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.5 : 1 7 : 1 large-scale text (120-150% larger than body text) 3 : 1 4.5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logotypes, or purely decorative text. see the solution section below for further information. having good color contrast on your site benefits a...

viewport-fit - CSS: Cascading Style Sheets
the viewport-fit css @viewport descriptor controls how a document's viewport fills the screen. syntax /* keyword values */ viewport-fit: auto; viewport-fit: contain; viewport-fit: cover; values auto this value doesn’t affect the initial layout viewport, and the whole web page is viewable. contain the viewport is scaled to fit the largest rectangle inscribed within the display. cover the viewport is scaled to fill the device display. it is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display. this descriptor hasn't been added to https://github.com/mdn/data/blob/master/css/at-rules.json yet. accessibility concerns when using the viewport-fit descriptor, one must keep in mind that not all de...

CSS Transforms - CSS: Cascading Style Sheets
css transforms is a module of css that defines how elements styled with css can be transformed in two-dimensional or three-dimensional space. reference properties backface-visibility perspective perspective-origin rotate scale transform transform-box transform-origin transform-style translate data types <transform-function> guides using css transforms step-by-step tutorial about how to transform elements styled with css. specifications specification status comment css transforms level 1 working draft initial definition. css transforms level 2 editor's draft adds individual transforms. ...

Animatable CSS properties - CSS: Cascading Style Sheets
offset-position offset-rotate opacity order outline outline-color outline-offset outline-width padding padding-block-end padding-block-start padding-bottom padding-inline-end padding-inline-start padding-left padding-right padding-top perspective perspective-origin right rotate row-gap scale scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start ...

Recipe: Media objects - CSS: Cascading Style Sheets
reason to use grid layout is in order that i can use fit-content() for the track sizing of the image. by using fit-content with a maximum size of 200 pixels, when we have a small image such as the icon, the track only gets as large as the size of that image — the max-content size. if the image is larger, the track stops growing at 200 pixels and as the image has a max-width of 100% applied, it scales down so that it continues to fit inside the column. by using grid-template-areas to achieve the layout, i can see the pattern in the css. i define my grid once we have a max-width of 500 pixels, so on smaller devices the media object stacks. an option for the pattern is to flip it to switch the image to the other side — this is done by adding the media-flip class, which defines a flipped gri...

Mozilla CSS extensions - CSS: Cascading Style Sheets
-moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels ...

background-repeat - CSS: Cascading Style Sheets
age can be repeated along the horizontal and vertical axes, or not repeated at all. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space). syntax /* keyword values */ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-re...

background - CSS: Cascading Style Sheets
the syntax of each layer is as follows: each layer may include zero or one occurrences of any of the following values: <attachment> <bg-image> <position> <bg-size> <repeat-style> the <bg-size> value may only be incl...

calc() - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 usage with integers when calc() is used where an <integer> is expected, the value will be rounded to the nearest integer. for example: .modal { z-index: calc(3 / 2); } this will give .modal a final z-index value of 2. note: the chrome browser cu...

font-size - CSS: Cascading Style Sheets
everal ways to specify the font size, including with keywords or numerical values for pixels or ems. choose the appropriate method based on the needs for the particular web page. keywords keywords are a good way to set the size of fonts on the web. by setting a keyword font size on the <body> element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly. pixels setting the font size in pixel values (px) is a good choice when you need pixel accuracy. a px value is static. this is an os-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. the results may vary slightly across browsers, as they may u...

image() - CSS: Cascading Style Sheets
s — those with dir="ltr" set on the element itself or inheriting the directionality from an ancestor or default value for the page — the image will be used as-is. list items with dir="rtl" set on the <li> or inheriting the right-to-left directionality from an ancestor, such as documents set to arabic or hebrew, will have the bullet display on the right, horizontally flippled, as if transform: scalex(-1) had been set. the text will also be displayed left-to-right. displaying a section of the background image <div class="box">hover over me. what cursor do you see?</div> .box:hover { cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16"); } when the user hovers over the box, the cursor will change to display the 16x16 px section of the sprite image, star...

<length> - CSS: Cascading Style Sheets
e physical unit with the same name. for high-dpi devices, inches (in), centimeters (cm), and millimeters (mm) are the same as their physical counterparts. 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. absolute lengths can cause accessibility problems, since they are fixed and do not scale according to user settings. for this reason, prefer relative lengths (such as em or rem) when setting font-size. px one pixel. for screen displays, it traditionally represents one device pixel (dot). however, for printers and high-resolution screens, one css pixel implies multiple device pixels. 1px = 1/96th of 1in. cm one centimeter. 1cm = 96px/2.54. mm one millimeter. 1mm = 1/10th of 1...

line-height - CSS: Cascading Style Sheets
ock-height sets the line height to the content height of the current block. accessibility concerns use a minimum value of 1.5 for line-height for main paragraph content. this will help people experiencing low vision conditions, as well as people with cognitive concerns such as dyslexia. if the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately. w3c understanding wcag 2.1 formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise as specifiedanimation typeeither number or length formal syntax normal | <number> | <length>...

mask-border-repeat - CSS: Cascading Style Sheets
e defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples basic usage this property doesn't appear to be supported anywhere yet. when it eventually starts to be supported, it will serve to define how the border mask slice will repeat around the border — i.e. ...

mask-border-slice - CSS: Cascading Style Sheets
reates nine regions in total: four corners, four edges, and a middle region. four slice lines, set a given distance from their respective sides, control the size of the regions. the above diagram illustrates the location of each region. zones 1-4 are corner regions. each one is used a single time to form the corners of the final border image. zones 5-8 are edge regions. these are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element. zone 9 is the middle region. it is discarded by default, but is used like a background image if the keyword fill is set. the mask-border-repeat, mask-border-width, and mask-border-outset properties determine how these regions are used to form the final mask border. formal definition initial value0applie...

mask-border-width - CSS: Cascading Style Sheets
mation typediscrete formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet. when it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to mask-border-slice will cause the slices to be scaled to fit the border mask. mask-border-width: 30 fill; chromium-based browsers support an outdated version of this property — mask-box-image-width — with a prefix: -webkit-mask-box-image-width: 20px; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect. specifications ...

mask-repeat - CSS: Cascading Style Sheets
syntax one or more <repeat-style> values, separated by commas. values <repeat-style> the one-value syntax is a shorthand for the full two-value syntax: single value two-value equivalent repeat-x repeat no-repeat repeat-y no-repeat repeat repeat repe...

max() - CSS: Cascading Style Sheets
ccessibility concerns when max() is used for controlling text size, make sure the text is always large enough to read. a suggestion is to use the min() function nested within a max() that has as its second value a relative length unit that is always large enough to read. for example: small { font-size: max(min(0.5vw, 0.5em), 1rem); } this ensures a minimum size of 1rem, with a text size that scales if the page is zoomed. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 specifications specification status comment css values and units module level 4the definition of 'max()' in that specification. editor's draft initial definition ...

min() - CSS: Cascading Style Sheets
if you have multiple constraints to apply. formal syntax min( <calc-sum># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when using min() to set a maximum font size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function). mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 examples setting a maximum size for a label and input another use case for css functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shr...

text-decoration-thickness - CSS: Cascading Style Sheets
ormation, behave as if auto was set, with the browser choosing an appropriate thickness. <length> specifies the thickness of the text decoration line as a <length>, overriding the font file suggestion or the browser default. <percentage> specifies the thickness of the text decoration line as a <percentage> of 1em in the current font. a percentage inherits as a relative value, and so therefore scales with changes in the font. the browser must use a minimum of 1 device pixel. for a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size. formal definition initial valueautoapplies toall elements. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the font s...

text-size-adjust - CSS: Cascading Style Sheets
websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. to map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit. since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. when an element containing text uses 100% of the screen's width, the algorithm increases its text size, but without modifying the layout. the text-size-adjust property allows web authors to dis...

text-underline-offset - CSS: Cascading Style Sheets
t; text-underline-offset: initial; text-underline-offset: unset; the text-underline-offset property is specified as a single value from the list below. values auto the browser chooses the appropriate offset for underlines. <length> specifies the offset of underlines as a <length>, overriding the font file suggestion and the browser default. it is recommended to use em units so the offset scales with the font size. <percentage> specifies the offset of underlines as a <percentage> of 1 em in the element's font. a percentage inherits as a relative value, and so therefore scales with changes in the font. for a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font sizes or vert...

zoom - CSS: Cascading Style Sheets
however, unlike css transforms, zoom affects the layout size of the element. /* keyword values */ zoom: normal; zoom: reset; /* <percentage> values */ zoom: 50%; zoom: 200%; /* <number> values */ zoom: 1.1; zoom: 0.7; /* global values */ zoom: inherit; zoom: initial; zoom: unset; syntax values normal render this element at its normal size. reset do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. ...

Graphics on the Web - Developer guides
. you can also construct graphics on-the-fly, or manipulate images after the fact. these articles provide insight into how you can accomplish this. 2d graphics canvas the <canvas> element provides apis to draw 2d graphics using javascript. svg scalable vector graphics (svg) lets you use lines, curves, and other geometric shapes to render graphics. with vectors, you can create images that scale cleanly to any size. view all... 3d graphics webgl a guide to getting started with webgl, the 3d graphics api for the web. this technology lets you use standard opengl es in web content. video using html5 audio and video embedding video and/or audio in a web page and controlling its playback. webrtc the rtc in webrtc stands for real-time communications, a technology that enables ...

Using HTML sections and outlines - Developer guides
ument structure. the html5 specification introduced several semantic sectioning elements to help organize the structure of documents. semantic sectioning elements are specifically designed to communicate structural meaning to browsers and other technologies interpreting the document on behalf of users, such as screen readers and voice assistants. semantic sectioning elements clarify the larger-scale structures within a document. they are intended to enhance the limited semantics of earlier versions of html, which included only the <div> tag as a generic mechanism for grouping related content. for example, <div class="navigation"> does not suggest any meaning about its content to a browser; only a human reading the html source can divine the meaning of a class like navigation. by contrast, th...

A hybrid approach - Developer guides
are about. and since the design is responsive, you know that each page looks as good as possible on the user’s screen. we can also address some of the performance problems with responsive design by incorporating server-side techniques. for example, an often-criticized point about responsive web design is that full-resolution images are sent to all devices, including phones that show the images scaled down anyway. one such technique for dealing with this issue uses server-side user-agent detection along with the wurfl device capability library to send a properly sized image for the user’s device. a range of products are also emerging which provide this as a service. of course, this technique suffers from all the downsides associated with user-agent detection. but even if it does not work, i...

Mobile Web Development - Developer guides
ironment — most obviously, the size and orientation of the screen — changes. it includes techniques such as: fluid css layouts, to make the page adapt smoothly as the browser window size changes the use of media queries to conditionally include css rules appropriate for the device screen width and height the viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device. working with touch screens to use a touch screen you'll need to work with dom touch events. you won't be able to use the css :hover pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. see this article on designing for touch screens. you can use the pointer or any-pointer media query to load d...

Developer guides
ed media and compatibility with popular browsers. audio and video manipulation the beauty of the web is that you can combine technologies to create new forms. having native audio and video in the browser means we can use these data streams with technologies such as <canvas>, webgl or web audio api to modify audio and video directly, for example adding reverb/compression effects to audio, or grayscale/sepia filters to video. this article provides a reference to explain what you need to do. events developer guide events refer to two things: a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page; and the naming, characterization, and use of a large number of incidents of different types. ajax ajax is a term that defines a group of t...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
ded by the luminance (l) component. think of it like creating the perfect paint color: you start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. this is the hue (h) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base. then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? this is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). in between values are a literal grey area. now that you have a grey pai...

<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
hat don't support canvas and in browsers with javascript disabled. providing a useful fallback text or sub dom helps to make the the canvas more accessible. required </canvas> tag unlike the <img> element, the <canvas> element requires the closing tag (</canvas>). sizing the canvas using css versus html the displayed size of the canvas can be changed using css, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted. it is better to specify your canvas dimensions by setting the width and height attributes directly on the <canvas> elements, either directly in the html or by using javascript. maximum canvas size the maximum size of a <canvas> element is very large, but the exact size depends on the b...

<input type="image"> - HTML: Hypertext Markup Language
he object-position property to adjust the positioning of the image within the <input> element's frame, and the object-fit property to control how the image's size is adjusted to fit within the frame. this allows you to specify a frame for the image using the width and height attributes to set aside space in the layout, then adjust where within that space the image is located and how (or if) it is scaled to occupy that space. examples a login form the following example shows the same button as before, but included in the context of a typical login form. html <form> <p>login to your account</p> <div> <label for="userid">user id</label> <input type="text" id="userid" name="userid"> </div> <div> <label for="pwd">password</label> <input type="password" id="pwd" name="p...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2"> note: when the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid pseudoclass. the step attribute is expressed in seconds. the step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). the default step is 60 seconds. see client-side validation for more information. tabindex global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard nav...

<link>: The External Resource Link element - HTML: Hypertext Markup Language
f the linked document to the current document. the attribute must be a space-separated list of link type values. sizes this attribute defines the sizes of the icons for visual media contained in the resource. it must be present only if the rel contains a value of icon or a non-standard type such as apple's apple-touch-icon. it may have the following values: any, meaning that the icon can be scaled to any size as it is in a vector format, like image/svg+xml. a white-space separated list of sizes, each in the format <width in pixels>x<height in pixels> or <width in pixels>x<height in pixels>. each of these sizes must be contained in the resource. note: most icon formats are only able to store one single icon; therefore most of the time the sizes attribute contains only one entry. ms...

Content negotiation - HTTP
as used by the server to select the transmitted content. that way, the cache can replay the algorithm and will be able to serve acceptable content directly, without more request to the server. obviously, the wildcard '*' prevents caching from occurring, as the cache cannot know what element is behind it. agent-driven negotiation server-driven negotiation suffers from a few downsides: it doesn't scale well. there is one header per feature used in the negotiation. if you want to use screen size, resolution or other dimensions, a new http header must be created. sending of the headers must be done on every request. this is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. the more precise headers are sen...

Math.random() - JavaScript
the implementation selects the initial seed to the random number generation algorithm; it cannot be chosen or reset by the user. math.random() does not provide cryptographically secure random numbers. do not use them for anything related to security. use the web crypto api instead, and more precisely the window.crypto.getrandomvalues() method. ...

Math.random() - JavaScript
the implementation selects the initial seed to the random number generation algorithm; it cannot be chosen or reset by the user. math.random() does not provide cryptographically secure random numbers. do not use them for anything related to security. use the web crypto api instead, and more precisely the window.crypto.getrandomvalues() method. ...

<math> - MathML
without changing the meaning of that text. if not present, its default value is inline. mode deprecated in favor of the display attribute. possible values are: display (which has the same effect as display="block") and inline. overflow specifies how an expression behaves if it is too long to fit in the allowed width. possible values are: linebreak (default), scroll, elide, truncate, scale. examples html5 notation <!doctype html> <html> <head> <title>mathml in html5</title> </head> <body> <math> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> ...

Performance fundamentals - Web Performance
ver, :focus, or :target, or by dynamically adding and removing classes on parent elements. if you want to create animations on the fly or modify them in javascript, james long has written a simple library for that called css-animations.js. use css transforms instead of tweaking absolute positioning and fiddling with all that math yourself, use the transform css property to adjust the position, scale, and so forth of your content. the reason is, once again, hardware acceleration. the browser can do these tasks on your gpu, letting the cpu handle other things. in addition, transforms give you capabilities you might not otherwise have. not only can you translate elements in 2d space, but you can transform in three dimensions, skew and rotate, and so forth. paul irish has an in-depth analysis o...

Progressive web app structure - Progressive web apps (PWAs)
"en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kga...

Progressive loading - Progressive web apps (PWAs)
we can do it selectively via javascript. the js13kpwa app uses a placeholder image instead, which is small and lightweight, while the final paths to target images are stored in data-src attributes: <img src='data/img/placeholder.png' data-src='data/img/slug.jpg' alt='name'> those images will be loaded via javascript after the site finishes building the html structure. the placeholder image is scaled the same way the original images are, so it will take up the same space and not cause the layout to repaint as the images load. loading via javascript the app.js file processes the data-src attributes like so: let imagestoload = document.queryselectorall('img[data-src]'); const loadimages = (image) => { image.setattribute('src', image.getattribute('data-src')); image.onload = () => { ...

Structural overview of progressive web apps - Progressive web apps (PWAs)
"en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kga...

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> and some more filters: <svg height="0"> <filter id="f3"> <feconvolvematrix filterres="100 100" style="color-interpolation-filters:srgb" order="3" kernelmatrix="0 -1 0 -1 4 -1 0 -1 0" preservealpha="true"/> </filter> <filter id="f4"> <fespecularlighting surfacescale="5" specularconstant="1" specularexponent="10" lighting-color="white"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> </filter> <filter id="f5"> <fecolormatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 1 0 0 0" style="color-interpolation-filters:srgb"/> ...

baseFrequency - SVG: Scalable Vector Graphics
umber is provided, then that value is used for both x and y. negative values are forbidden. example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'basefrequency' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second e...

gradientTransform - SVG: Scalable Vector Graphics
default value identity transform value <transform-list> animatable yes <transform-list> a list of transformation functions specifying some additional transformation from the gradient coordinate system onto the target coordinate system. specifications specification status comment css transforms level 1the definition of 'surfacescale for <fespecularlighting>' in that specification. working draft defines the <transformation-list> value. scalable vector graphics (svg) 2the definition of 'gradienttransformation for <lineargradient>' in that specification. candidate recommendation no change scalable vector graphics (svg) 2the definition of 'gradienttransformation for <radialgradient>' in that specifi...

method - SVG: Scalable Vector Graphics
. only one element is using this attribute: <textpath> textpath for <textpath>, method indicates the method by which text should be rendered along the path. value align | stretch default value align animatable yes align this value indicates that the characters should be rendered so that they are not stretched or warped. the characters are rotated, scaled and stretched when they are rendered. as a result, for fonts with connected characters (e.g. cursive fonts), the connections may not align properly when text is rendered along the path. stretch this value indicates that the character outlines will be converted into paths, and then stretched and possibly warped. with this approach, connected characters, such as in cursive fonts, will maintain t...

numOctaves - SVG: Scalable Vector Graphics
animatable yes <integer> defines the number of octaves. negative values are forbidden. example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" numoctaves="3" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'numoctaves' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edit...

patternTransform - SVG: Scalable Vector Graphics
sform definitions that are applied to a pattern tile. only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- apply a transform on the tile --> <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile. note: as of svg2, it is also allowed to use the css transform property. however, the curre...

result - SVG: Scalable Vector Graphics
it is ...

seed - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)th...

type - SVG: Scalable Vector Graphics
b>, and <fefunca> elements, it indicates the type of component transfer function. for the <feturbulence> element, it indicates whether the filter primitive should perform a noise or turbulence function. for the <style> and <script> elements, it defines the content type of the element. ...

xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">so...

yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">so...

zoomAndPan - SVG: Scalable Vector Graphics
panning represents a translation (i.e., a shift) transformation on an svg document fragment in response to a user interface action. ...

SVG Attribute reference - SVG: Scalable Vector Graphics
line-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage ...

<feDiffuseLighting> - SVG: Scalable Vector Graphics
ted by adding several of these light maps together before applying it to the texture image. usage context categoriesfilter primitive elementpermitted contentany number of descriptive elements and exactly one light source element, in any order. attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in surfacescale diffuseconstant kernelunitlength dom interface this element implements the svgfediffuselightingelement interface. example the following example show the effect of the <fediffuselighting> element on a circle with each light source available. each time, the light comes from the upper left corner. <svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"> <!-- no light is applied -...

<feSpecularLighting> - SVG: Scalable Vector Graphics
mulated by adding several of these light maps before applying it to the texture image. usage context categoriesfilter primitive elementpermitted contentexactly one light source element first and any number of descriptive elements in any order. attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in surfacescale specularconstant specularexponent kernelunitlength dom interface this element implements the svgfespecularlightingelement interface. example <svg height="200" width="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id = "filter"> <fespecularlighting result="specout" specularexponent="20" lighting-color="#bbbbbb"> <fepointlight x="50" y="75" z=...

<feTurbulence> - SVG: Scalable Vector Graphics
chtiles type dom interface this element implements the svgfeturbulenceelement interface. example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<feturbulence>' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second ...

<image> - SVG: Scalable Vector Graphics
butes x: positions the image horizontally from the origin. y: positions the image vertically from the origin. width: the width the image renders at. unlike html's <img>, this attribute is required. height: the height the image renders at. unlike html's <img>, this attribute is required. href and xlink:href: points at a url for the image file. preserveaspectratio: controls how the image is scaled. dom interface <image> implements the svgimageelement interface. example basic rendering of a png image in svg: svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> </svg> result specifications specification...

<text> - SVG: Scalable Vector Graphics
table: yes rotate rotates orientation of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. value type: <length>|<percentage> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event att...

<tspan> - SVG: Scalable Vector Graphics
table: yes rotate rotates orientation of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. value type: <length>|<percentage> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rul...

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
svg animation with smil for a brief overview. full documentation for svg is forthcoming. someday. there is also a description of the mozilla support of the changes in svg 2. element implementation status a quick overview of the svg 1.1 elements and the current status of the native support. element notes structure module svg implemented. currentscale and currenttranslate dom attributes are implemented, but there is no pan and zoom user interface. svgsvgelement unimplemented attributes: contentscripttype, contentstyletype, viewport, currentview unimplemented bindings: getintersectionlist, getenclosurelist, checkintersection, checkenclosure g implemented. d...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
implementation status unknown auto as initial valu...

Basic shapes - SVG: Scalable Vector Graphics
he rectangle circle the <circle> element draws a circle on the screen. it takes 3 basic parameters to determine the shape and size of the element. <circle cx="25" cy="75" r="20"/> r the radius of the circle. cx the x position of the center of the circle. cy the y position of the center of the circle. ellipse an <ellipse> is a more general form of the <circle> element, where you can scale the x and y radius (commonly refferred to as the semimajor and semiminor axes in maths) of the circle separately. <ellipse cx="75" cy="75" rx="20" ry="5"/> rx the x radius of the ellipse. ry the y radius of the ellipse. cx the x position of the center of the ellipse. cy the y position of the center of the ellipse. line the <line> element takes the positions of two points as paramete...

Gradients in SVG - SVG: Scalable Vector Graphics
ont-size="12pt">reflect</text> </svg> screenshotlive sample both gradients also have an attribute named gradientunits, which describes the unit system you're going to use when you describe the size or orientation of the gradient. there are two possible values to use here: userspaceonuse or objectboundingbox. objectboundingbox is the default, so that's what has been shown so far. it essentially scales the gradient to the size of your object, so you only have to specify coordinates in values from zero to one, and they're scaled to the size of your object automatically for you. userspaceonuse essentially takes in absolute units. so you have to know where your object is, and place the gradient at the same place. the radialgradient above would be rewritten: <radialgradient id="gradient" cx="60"...

Paths - SVG: Scalable Vector Graphics
t in the svg library of basic shapes. it can be used to create lines, curves, arcs, and more. paths create complex shapes by combining multiple straight lines or curved lines. complex shapes composed only of straight lines can be created as <polyline>s. while <polyline>s and <path>s can create similar-looking shapes, <polyline>s require a lot of small straight lines to simulate curves, and don't scale well to larger sizes. a good understanding of paths is important when drawing svgs. while creating complex paths using an xml editor or text editor is not recommended, understanding how they work will allow to identify and repair display issues in svgs. the shape of a <path> element is defined by one parameter: d. (see more in basic shapes.) the d attribute contains a series of commands and par...

Web technology for developers
including the dom and all of the related apis and interfaces you can use to build web content and apps. html hypertext markup language is the language used to describe and define the content of a web page. css cascading style sheets are used to describe the appearance of web content. svg scalable vector graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn. mathml the mathematical markup language makes it possible to display complex mathematical equations and syntax. temporary the stuff below here is temporary to help keep track of things while organization work is ongoing. pay it no mind. accessibilitycss houdinicss: cascading style sheetsdemos of open web technologiesdeveloper guidese...