Basic shapes - SVG: Scalable Vector Graphics
« previousnext » there are several basic shapes used for most svg drawing. the purpose of these shapes is fairly obvious from their names. some of the parameters that determine their position and size are given, but an element reference would probably contain more accurate and complete descriptions along with other properties that won't be covered in here. however, since they're used in most svg documents, it's necessary to give them some sort of introduction. basic shapes to insert a shape, you create an element in the document. different elements correspond to different shapes and take different parameters to describe the size and position of those shapes. ...
...on't be covered in here. however, since they're used in most svg documents, it's necessary to give them some sort of introduction. basic shapes to insert a shape, you create an element in the document. different elements correspond to different shapes and take different parameters to describe the size and position of those shapes. some are slightly redundant in that they can be created by other shapes, but they're all there for your convenience and to keep your svg documents as short and as readable as possible. all the basic shapes are shown in the image to the right. the code to generate that looks something like: <?xml version="1.0" standalone="no"?> <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="30" stroke="blac...
...95 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/> <path d="m20,230 q40,205 50,230 t90,230" fill="none" stroke="blue" stroke-width="5"/> </svg> note: the stroke, stroke-width, and fill attributes are explained later in the tutorial. rectangle the <rect> element draws a rectangle on the screen. there are 6 basic attributes that control the position and shape of the rectangles on screen. the one on the right has its rx and ry parameters set, giving it rounded corners. if they're not set, they default to 0. <rect x="10" y="10" width="30" height="30"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> x the x position of the top left corner of the rectangle. y the y position of the top left corner of the rectangle. width the width of...
...And 3 more matches

WaveShaperNode.oversample - Web APIs
oversampling is a technique for creating more samples (up-sampling) before applying a distortion effect to the audio signal. once applied, the number of samples is reduced to its initial numbers. this leads to better results by avoiding some aliasing, but comes at the expense of a lower precision shaping curve. the possible oversample values are: value effect 'none' do not perform any oversampling. '2x' double the amount of samples before applying the shaping curve. '4x' multiply by 4 the amount of samples before applying the shaping curve. ...
...recision shaping curve. the possible oversample values are: value effect 'none' do not perform any oversampling. '2x' double the amount of samples before applying the shaping curve. '4x' multiply by 4 the amount of samples before applying the shaping curve. ...
... '2x' double the amount of samples before applying the shaping curve. '4x' multiply by 4 the amount of samples before applying the shaping curve. syntax distortion.oversample = enumeratedvalue; values distortion is a waveshapernode. enumeratedvalue is one of 'none', '2x', or '4x'. example the following example shows basic usage of an audiocontext to create a wave shaper node. for applied examples/information, check out our voice-change-o-matic demo (see app.js for relevant code). note: sigmoid functions are commonly used for distortion curves because of their natural properties. their s-shape, for instance, helps create a smoother sounding result. we found the below distortion curve code on stack overflow. var audioctx = new (window.audiocontext || window.w...
...ice-change-o-matic demo (see app.js for relevant code). note: sigmoid functions are commonly used for distortion curves because of their natural properties. their s-shape, for instance, helps create a smoother sounding result. we found the below distortion curve code on stack overflow. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ... function makedistortioncurve(amount) { var k = typeof amount === 'number' ? amount : 50, n_samples = 44100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ... distortion.curve = ma...

WaveShaperNode - Web APIs
the waveshapernode interface represents a non-linear distorter. it is an audionode that uses a curve to apply a wave shaping distortion to the signal. beside obvious distortion effects, it is often used to add a warm feeling to the signal. a waveshapernode always has exactly one input and one output. number of inputs 1 number of outputs 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor waveshapernode() creates a new instance of an waveshapernode object. properties inherits properties from its parent, audionode. waveshapernode.curve is a float32array of numbers describing the distortion to apply. ...
... 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor waveshapernode() creates a new instance of an waveshapernode object. properties inherits properties from its parent, audionode. waveshapernode.curve is a float32array of numbers describing the distortion to apply. waveshapernode.oversample is an enumerated value indicating if oversampling must be used. oversampling is a technique for creating more samples (up-sampling) before applying the distortion effect to the audio signal. methods no specific method; inherits methods from its parent, audionode. example the following example shows basic usage of an audiocontext to create a wave shaper node. for applied exam...
...signal. methods no specific method; inherits methods from its parent, audionode. example the following example shows basic usage of an audiocontext to create a wave shaper node. for applied examples/information, check out our voice-change-o-matic demo (see app.js for relevant code). note: sigmoid functions are commonly used for distortion curves because of their natural properties. their s-shape, for instance, helps create a smoother sounding result. we found the below distortion curve code on stack overflow. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ... function makedistortioncurve(amount) { var k = typeof amount === 'number' ? amount : 50, n_samples = 44100, curve = new float32array(n_samples),...
... working draft ...

WaveShaperNode.curve - Web APIs
the curve property of the waveshapernode interface is a float32array of numbers describing the distortion to apply. the mid-element of the array is applied to any signal value of 0, the first one to signal values of -1, and the last to signal values of 1; values lower than -1 or greater than 1 are treated like -1 or 1 respectively. if necessary, intermediate values of the distortion curve are linearly interpolated. note: the array can be a null value: in that case, no distortion is applied to the input signal. syntax var audioctx = new audiocontext(); var distortion = audioctx.createwaveshaper(); distortion.curve = mycurvedataarray; // mycurvedataarray is a float32array value a float32array. ...
... linearly interpolated. note: the array can be a null value: in that case, no distortion is applied to the input signal. syntax var audioctx = new audiocontext(); var distortion = audioctx.createwaveshaper(); distortion.curve = mycurvedataarray; // mycurvedataarray is a float32array value a float32array. example the following example shows basic usage of an audiocontext to create a wave shaper node. for applied examples/information, check out our voice-change-o-matic demo (see app.js for relevant code). note: sigmoid functions are commonly used for distortion curves because of their natural properties. their s-shape, for instance, helps create a smoother sounding result. we found the below distortion curve code on stack overflow. var audioctx = new (window.audiocontext || window.w...
...ice-change-o-matic demo (see app.js for relevant code). note: sigmoid functions are commonly used for distortion curves because of their natural properties. their s-shape, for instance, helps create a smoother sounding result. we found the below distortion curve code on stack overflow. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ... function makedistortioncurve(amount) { var k = typeof amount === 'number' ? amount : 50, n_samples = 44100, curve = new float32array(n_samples), deg = math.pi / 180, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ... distortion.curve = ma...

shape - CSS: Cascading Style Sheets
the shape css media feature can be used to test the shape of the device to distinguish recrangular and round displays. syntax the shape descrete feature is specified as one of two acceptable strings, either rect reprsenting a rectangular screen or round representing a circular, oval or elliptical screen. rect the shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the traditional designs are appropriate. round the shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate. ...
... rect the shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the traditional designs are appropriate. round the shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate. examples basic example html <h1>hello world!</h1> css h1 { text-align: left; } @media (shape: rect) { h1 { text-align: left; } } @media (shape: round) { h1 { text-align: center; } } custom stylesheet this html will apply a special stylesheet for devices that have round screens. ...
...te. examples basic example html <h1>hello world!</h1> css h1 { text-align: left; } @media (shape: rect) { h1 { text-align: left; } } @media (shape: round) { h1 { text-align: center; } } custom stylesheet this html will apply a special stylesheet for devices that have round screens. <head> <link rel="stylesheet" href="default.css" /> <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> </head> specifications specification status css round display level 1the definition of 'shape' in that specification. working draft ...

Property cache
spidermonkey's property cache is an internal data structure used to speed up property accesses in the interpreter and to communicate between the interpreter and jit. warning: the details below are obsolete. shape integers do not exist anymore. the property cache still exists, but it is simpler now. spidermonkey mainly uses type inference to determine which properties are being accessed; in cases where type inference does not find the exact shape of the object being accessed, spidermonkey uses a pic (polymorphic inline caches) to store the result of the lookup. ...
... the property cache is a per-thread cache of the results of steps 1 and 2. when executing certain property-accessing bytecode instructions, the interpreter populates the cache to speed future execution of the same instruction. ...
...lue pairs. the keys describe the context in which a property lookup occurs. the values consist of two word-sized members. entry->vcap caches the results of part 1 above, telling which object contains the desired property. entry->vword is described in the section entry value words below. it caches the results of part 2, if the property is simple enough for optimized access, or a pointer to the js::shape if not. the opcodes that take advantage of the property cache, as of june 2009, are: getprop, get{x,this,arg,local}prop, and length; name; setprop, bindname, and setname; callprop and callname; and {inc,dec}name and name{inc,dec}. elem opcodes do not use it. nor do {inc,dec}prop or prop{inc,dec}. nor do operations such as add that only need to look up a property (.tostring) in unusual cases. t...
...And 37 more matches

Index - Web APIs
s the position and orientation of the person listening to the audio. 242 baseaudiocontext.createperiodicwave() api, audio, audiocontext, baseaudiocontext, media, method, reference, web audio api, createperiodicwave the createperiodicwave() method of the baseaudiocontext interface is used to create a periodicwave, which is used to define a periodic waveform that can be used to shape the output of an oscillatornode. 243 baseaudiocontext.createscriptprocessor() api, audiocontext, baseaudiocontext, method, reference, web audio api, createscriptprocessor a scriptprocessornode. 244 baseaudiocontext.createstereopanner() api, audiocontext, baseaudiocontext, media, method, reference, web audio api, createstereopanner a stereopannernode. ...
... 243 baseaudiocontext.createscriptprocessor() api, audiocontext, baseaudiocontext, method, reference, web audio api, createscriptprocessor a scriptprocessornode. 244 baseaudiocontext.createstereopanner() api, audiocontext, baseaudiocontext, media, method, reference, web audio api, createstereopanner a stereopannernode. 245 baseaudiocontext.createwaveshaper() api, audiocontext, baseaudiocontext, method, reference, web audio api, createwaveshaper a waveshapernode. 246 baseaudiocontext.currenttime api, audiocontext, baseaudiocontext, property, reference, web audio api, currenttime the currenttime read-only property of the baseaudiocontext interface returns a double representing an ever-increasing hardware timestamp in s...
...9 advanced animations canvas, graphics, tutorial we are going to use a ball for our animation studies, so let's first draw that ball onto the canvas. the following code will set us up. 520 applying styles and colors canvas, graphics, html, html5, intermediate, tutorial up until now we have only seen methods of the drawing context. if we want to apply colors to a shape, there are two important properties we can use: fillstyle and strokestyle. 521 basic animations canvas, graphics, html, html5, intermediate, tutorial probably the biggest limitation is, that once a shape gets drawn, it stays that way. if we need to move it we have to redraw it and everything that was drawn before it. it takes a lot of time to redraw complex frames and the per...
...And 26 more matches

Classes and Inheritance - Archive of obsolete content
ss constructor. it is possible to read this section on its own. however, to fully appreciate how class works, and the problem it is supposed to solve, it is recommended that you read the entire article. constructors before the ecmascript 6 standard, a javascript class was defined by creating a constructor function for that class. to illustrate this, let's define a simple constructor for a class shape: function shape(x, y) { this.x = x; this.y = y; } we can now use this constructor to create instances of shape: let shape = new shape(2, 3); shape instanceof shape; // => true shape.x; // => 2 shape.y; // => 3 the keyword new tells javascript that we are performing a constructor call. constructor calls differ from ordinary function calls in that javascript automatically creates a ne...
...efaults to the value of this. constructors are just ordinary functions, however, so it is perfectly legal to perform ordinary function calls on them. in fact, some people (including the add-on sdk team) prefer to use constructors this way. however, since the value of this is undefined for ordinary function calls, we need to add some boilerplate code to convert them to constructor calls: function shape(x, y) { if (!this) return new shape(x, y); this.x = x; this.y = y; } prototypes every object has an implicit property, known as its prototype. when javascript looks for a property, it first looks for it in the object itself. if it cannot find the property there, it looks for it in the object's prototype. if the property is found on the prototype, the lookup succeeds, and ja...
...e property there, it looks for it in the object's prototype. if the property is found on the prototype, the lookup succeeds, and javascript pretends that it found the property on the original object. every function has an explicit property, known as prototype. ...
...And 22 more matches

SVG documentation index - SVG: Scalable Vector Graphics
ction. 70 externalresourcesrequired deprecated, needsexample, svg, svg attribute the externalresourcesrequired attribute specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container or graphics element. 71 fill svg, svg attribute the fill attribute has two different meanings. for shapes and text it's a presentation attribute that defines the color (or any svg paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation. 72 fill-opacity svg, svg attribute the fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to a...
... and text it's a presentation attribute that defines the color (or any svg paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation. 72 fill-opacity svg, svg attribute the fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to a shape. 73 fill-rule svg, svg attribute the fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape. 74 filter svg, svg attribute, svg filter the filter attribute specifies the filter effects defined by the <filter> element that shall be applied to its element. 75 filterres needsexample...
...d. no light is projected outside the cone. 127 local deprecated, svg, svg attribute the local attribute specifies the unique id for a locally stored color profile as specified by international color consortium. 128 marker-end svg, svg attribute the marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. 129 marker-mid svg, svg attribute the marker-mid attribute defines the arrowhead or polymarker that will be drawn at all interior vertices of the given shape. 130 marker-start svg, svg attribute the marker-start attribute defines the arrowhead or polymarker that will be drawn at the first vertex of the given shape. 131 markerheight needsex...
...And 22 more matches

clip-path - CSS: Cascading Style Sheets
oject, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...rder-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* box and shape values combined */ clip-path: padding-box circle(50px at 0 100px); /* global values */ clip-path: inherit; clip-path: initial; clip-path: unset; the clip-path property is specified as one or a combination of the values listed below. values <clip-source> a <url> referencing an svg <clippath> element. <basic-shape> a shape whose size and position is defined by the <geometry-box> value. if...
...if specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius), to be the clipping path. ...
...And 19 more matches

Applying styles and colors - Web APIs
color is a string representing a css <color>, a gradient object, or a pattern object. ...
... color is a string representing a css <color>, a gradient object, or a pattern object. we'll look at gradient and pattern objects later. ...
...osal to make our drawings a little more attractive. you will learn how to add different colors, line styles, gradients, patterns and shadows to your drawings. colors up until now we have only seen methods of the drawing context. if we want to apply colors to a shape, there are two important properties we can use: fillstyle and strokestyle. fillstyle = color sets the style used when filling shapes. strokestyle = color sets the style for shapes' outlines. ...
...And 16 more matches

fill-rule - SVG: Scalable Vector Graphics
the fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape. note: as a presentation attribute, fill-rule can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- the center of the shape has two path segments (shown by the red stroke) between it and infinity. it is therefore considered outside the shape, and not filled. ...
...finity. it is therefore considered outside the shape, and not filled. --> <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,35 102,35 179,90"/> </svg> usage notes value nonzero | evenodd default value nonzero animatable yes the fill-rule attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined: nonzero the value nonzero determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from rig...
...gs, if the result is zero then the point is outside the path. otherwise, it is inside. ...
...And 9 more matches

Building up a basic demo with Three.js - Game development
three.js, as with any other 3d library, provides built-in helper functions to help you implement common 3d functionality more quickly. in this article we'll take you through the real basics of using three, including setting up a development environment, structuring the necessary html, the fundamental objects of three, and how to build up a basic demo. note: we chose three because it is one of the most popular webgl libraries, and it is easy to get started with. ...
...ree.webglrenderer({antialias:true}); renderer.setsize(width, height); renderer.setclearcolor(0xdddddd, 1); document.body.appendchild(renderer.domelement); we are creating a new webgl renderer, setting its size to fit the whole available space on the screen, and appending the dom structure to the page. you might have noticed the antialias parameter in the first line — this renders the edges of shapes more smoothly. the setclearcolor() method sets our background to a light gray colour, instead of the default black one. add this code into our second <script> element, just below the javascript comment. scene a scene is the place where everything happens. when creating new objects in the demo, we add them all inside the scene to become visible on the screen. in three.js, the scene is represen...
...enders the scene and the camera. right after the function declaration, we're invoking it for the first time to start the loop, after which it will be used indefinitely. again, add this new code below your previous additions. try saving the file and opening it in your browser. you should now see a gray window. congratulations! geometry now our scene is properly rendering, we can start adding 3d shapes. to speed up development, three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. there's cubes, spheres, cylinders, and more complicated shapes available. detail like drawing required vertices and faces, for a given shape, is handled by the three framework, so we can focus on higher level coding. let's start, by defining the geo...
...And 8 more matches

Building up a basic demo with the PlayCanvas engine - Game development
at we will create later on. note: the distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you. try saving the file and loading it in your browser. you should now see a gray window. ...
...ly be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you. try saving the file and loading it in your browser. you should now see a gray window. congratulations! ...
...o you. try saving the file and loading it in your browser. you should now see a gray window. congratulations! ...
...And 7 more matches

JavaScript modules - JavaScript
entation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature. introducing an example to demonstrate usage of modules, we've created a simple set of examples that you can find on github. these examples demonstrate a simple set of modules that create a <canvas> element on a webpage, and then draw (and report information about) different shapes on the canvas. these are fairly trivial, but have been kept deliberately simple to demonstrate modules clearly. note: if you want to download the examples and run them locally, you'll need to run them through a local web server. basic example structure in our first example (see basic-modules) we have a file structure as follows: index.html main.js modules/ canvas.js square.js no...
... the lack of curly braces. this is because there is only one default export allowed per module, and we know that randomsquare is it. the above line is basically shorthand for: import {default as randomsquare} from './modules/square.js'; note: the as syntax for renaming exported items is explained below in the renaming imports and exports section. avoiding naming conflicts so far, our canvas shape drawing modules seem to be working ok. but what happens if we try to add a module that deals with drawing another shape, like a circle or triangle? these shapes would probably have associated functions like draw(), reportarea(), etc. too; if we tried to import different functions of the same name into the same top-level module file, we'd end up with conflicts and errors. fortunately there are a ...
...he code just the same as before (as long as you include the object names where needed), and the imports are much neater. modules and classes as we hinted at earlier, you can also export and import classes; this is another option for avoiding conflicts in your code, and is especially useful if you've already got your module code written in an object-oriented style. you can see an example of our shape drawing module rewritten with es classes in our classes directory. as an example, the square.js file now contains all its functionality in a single class: class square { constructor(ctx, listid, length, x, y, color) { ... } draw() { ... } ... } which we then export: export { square }; over in main.js, we import it like this: import { square } from './modules/square.js'; ...
...And 7 more matches

SVG Presentation Attributes - SVG: Scalable Vector Graphics
lay dominant-baseline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-spacing writing-mode attributes alignment-baseline it specifies how an object is aligned along t...
...entral|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; animatable: yes baseline-shift it allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. value: auto|baseline|super|sub|<percentage>|<length>|inherit; animatable: yes clip deprecated it defines what portion of an element is visible. value: auto|<shape()>|inherit; animatable: yes clip-path it binds the element it is applied to with a given <clippath> element. value: none|<funciri>|inherit; animatable: yes clip-rule it indicates how to determine what side of a path is inside a shape in order to know how a <clippath> should clip its target. value: nonezero|evenodd|inherit; animatable: yes color it provides a potential indirect value (curr...
...ground image. value: accumulate|new|inherit; animatable: no fill it defines the color of the inside of the graphical element it applies to. value: <paint>; animatable: yes fill-opacity it specifies the opacity of the color or the content the current object is filled with. value: <number>|<percentage>; animatable: yes fill-rule it indicates how to determine what side of a path is inside a shape. value: nonzero|evenodd|inherit; animatable: yes filter it defines the filter effects defined by the <filter> element that shall be applied to its element. value: <funciri>|none|inherit; animatable: yes flood-color it indicates what color to use to flood the current filter primitive subregion defined through the <feflood> or <fedropshadow> element. value: <color>; animatable: yes flood-op...
...And 7 more matches

Object.prototype.__proto__ - JavaScript
ting of a getter and setter function. a property access for __proto__ that eventually consults object.prototype will find this property, but an access that does not consult object.prototype will not. if some other __proto__ property is found before object.prototype is consulted, that property will hide the one found on object.prototype. ...
...ss that does not consult object.prototype will not. if some other __proto__ property is found before object.prototype is consulted, that property will hide the one found on object.prototype. examples using __proto__ var circle = function () {}; var shape = {}; var circle = new circle(); // set the object prototype. // deprecated. this is for example purposes only. do not do this in real code. ...
..._proto__ property is found before object.prototype is consulted, that property will hide the one found on object.prototype. examples using __proto__ var circle = function () {}; var shape = {}; var circle = new circle(); // set the object prototype. // deprecated. this is for example purposes only. do not do this in real code. ...
...And 6 more matches

Building up a basic demo with PlayCanvas editor - Game development
t small, so we will use the empty project — click on the blank project option and enter a name for it (we are using "mdn games demo".) enter a description if you want — it is optional. click create to have it created. next you'll see your project's page — there's not much yet. by clicking the editor button we'll launch the online playcanvas editor where we'll create our scene with the shapes. do this now. creating the scene here's how the scene looks initially in the editor. even though it's a blank new project we don't have to start entirely from scratch — the camera and directional light are prepared already, so you don't have to worry about them. now onto the creative part. to add an entity to the scene you have to click on the big plus button located in the top left are...
...ill open a color wheel. from here you can click your desired color or enter it in the bottom text field as a hex value. we've chosen a blue color with a hex value of 0095dd — enter this code in the text field and press return for it to be accepted. note: yes, you read that right — you need to enter the hex value without the hash/pound symbol. now we can apply the 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 rotat...
... 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. ...
...And 5 more matches

offset-path - CSS: Cascading Style Sheets
the offset-path css property specifies a motion path for an element to follow and defines the element's positioning within the parent container or svg coordinate system. ...
...s a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the css gradient angle where 0deg is up, with positive angles increasing in the clockwise direction, with the size value being similar to the css radial gradient size values from closest-side to farthest-corner, and the keyterm contain. url() references the id of an svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path. <basic-shape> specifies a css shape including circle(), ellipse(), inset(), polygon(), or path(). path() a path string defined with svg coordinate syntax. none specifies no motion path at all. description this property defines a path an animated element can follow. an offset p...
... early versions of the spec called this property motion-path. ...
...And 5 more matches

Building up a basic demo with A-Frame - Game development
in the bottom right corner of the screen, to allow you to shift to full screen, stereoscopic image viewing if you have the 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 co...
...type="directional" color="#fff" intensity="0.5" position="-1 1 2"> </a-light> <a-light type="ambient" color="#fff"> </a-light> the directional light has a white color, its intensity is set to 0.5, and it is placed at position -1 1 2. the ambient light only needs a color, which is also white. adding some advanced geometry we have a cube on the scene already; now let's try adding more shapes. we are not limited to the default entities like <a-cube> — using <a-entity> we can create custom advanced shapes. let's try adding a torus — add this element below the previous code: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" rotation="10 0 0" position="-3 1 0"> </a-entity> our entity has a torus primitive, which repr...
...rotation and position are set in the same way as we saw earlier. ...
...And 4 more matches

Drawing graphics - Learn web development
to move on. 2d canvas basics as we said above, all drawing operations are done by manipulating a canvasrenderingcontext2d object (in our case, ctx). many operations need to be given coordinates to pinpoint exactly where to draw something — the top left of the canvas is point (0, 0), the horizontal (x) axis runs from left to right, and the vertical (y) axis runs from top to bottom. drawing shapes tends to be done using the rectangle shape primitive, or by tracing a line along a certain path and then filling in the shape. below we'll show how to do both. simple rectangles let's start with some simple rectangles. first of all, take a copy of your newly coded canvas template (or make a local copy of 1_canvas_template.html if you didn't follow the above steps). next, add the fo...
...ne has become much thicker! that's it for now. at this point your example should look like this: note: the finished code is available on github as 2_canvas_rectangles.html. drawing paths if you want to draw anything more complex than a rectangle, you need to draw a path. basically, this involves writing code to specify exactly what path the pen should move along on your canvas to trace the shape you want to draw. canvas includes functions for drawing straight lines, circles, bézier curves, and more. let's start the section off by making a fresh copy of our canvas template (1_canvas_template.html), in which to draw the new example. we'll be using some common methods and properties across all of the below sections: beginpath() — start drawing a path at the point where the pen curre...
... we'll be using some common methods and properties across all of the below sections: beginpath() — start drawing a path at the point where the pen currently is on the canvas. on a new canvas, the pen starts out at (0, 0). moveto() — move the pen to a different point on the canvas, without recording or tracing the line; the pen simply "jumps" to the new position. fill() — draw a filled shape by filling in the path you've traced so far. stroke() — draw an outline shape by drawing a stroke along the path you've drawn so far. you can also use features like linewidth and fillstyle/strokestyle with paths as well as rectangles. a typical, simple path-drawing operation would look something like so: ctx.fillstyle = 'rgb(255, 0, 0)'; ctx.beginpath(); ctx.moveto(50, 50); // draw your pa...
...And 4 more matches

SVG Guidelines
y are a source of many issues, and the svg wg recommends not to include them. see svg authoring guidelines. avoid the use of cdata sections cdata sections are used to avoid parsing some text as html. most of time, cdata isn't needed, for example, the content in <style> tags doesn't need to be wrapped in a cdata section as the content inside the tag is already correctly parsed as css. invisible shapes there are two kinds of invisible shapes: the off-screen ones and the uncolored ones. the offscreen shapes are hard to spot, even with an automated tool, and are usually context aware. those kinds of shapes are visible but off the svg view box. here's an example of a file with offscreen shapes. on the other hand, the uncolored ones are easier to spot, since they usually come with styles making...
...cated by the filter effects specification) id (id on root element has no effect) xmlns:xlink attribute when there are no xlink:href attributes used throughout the file other unused xml namespace definitions xml:space when there is no text used in the file other empty tags, this may be obvious, but those are sometimes found in svgs unreferenced ids (usually on gradient stops, but also on shapes or paths) clip-rule attribute when the element is not a descendant of a <clippath> fill-rule attribute when the element is a descendant of a <clippath> unreferenced/unused clip paths, masks or defs (example) styling basics privilege short lowercase hex for colors don't use excessive precision for numeric values (usually comes from illustrator) use descriptive ids avoid inline styles...
...you can also use svg grouping to avoid duplicating those attributes avoid introducing variants of the same file (color/style variants), and use sprites instead (with class names) default style values there's usually no need to set the default style value unless you're overriding a style. here are some commonly seen examples: style="displ...
...And 4 more matches

radial-gradient() - CSS: Cascading Style Sheets
the function's result is an object of the <gradient> data type, which is a special kind of <image>. 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. ...
...thub.com/mdn/interactive-examples and send us a pull request. syntax /* a gradient at the center of its container, starting red, changing to blue, and finishing green */ radial-gradient(circle at center, red 0, blue, green 100%) values <position> the position of the gradient, interpreted in the same way as background-position or transform-origin. if unspecified, it defaults to center. <shape> the gradient's shape. the value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-keyword> a keyword describing how big the ending shape must be. the possible values are: keyword description closest-side the gra...
...'s shape. the value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-keyword> a keyword describing how big the ending shape must be. the possible values are: keyword description closest-side the gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). closest-corner the gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center. ...
...And 4 more matches

<area> - HTML: Hypertext Markup Language
at do not display images. the text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. this attribute is required only if the href attribute is used. coords a set of values specifying the coordinates of the hot-spot region. the number and meaning of the values depend upon the value specified for the shape attribute. rect or rectangle: the value is two x,y pairs: left, top, right, bottom. circle: the value is x,y,r where x,y is a pair specifying the center of the circle and r is a value for the radius. poly or polygon: the value is a set of x,y pairs for each point in the polygon: x1,y1,x2,y2,x3,y3, and so on. the values are numbers of css pixels. download this attribute, if present,...
...aining the href attribute, this attribute specifies the relationship of the target object to the link object. the value is a space-separated list of link types values. the values and their semantics will be registered by some authority that might have meaning to the document author. the default relationship, if no other is given, is void. use this attribute only if the href attribute is present. ...
...href attribute, this attribute specifies the relationship of the target object to the link object. the value is a space-separated list of link types values. the values and their semantics will be registered by some authority that might have meaning to the document author. the default relationship, if no other is given, is void. use this attribute only if the href attribute is present. ...
...And 4 more matches

JIT Optimization Strategies
; // x is a definite slot property this.y = 10; // y is a definite slot property somecomplicatedfunctioncall(); this.z = 20; // z is not a definite slot property. } in the above example, the properties x and y can always be determined to exist on any instance of someconstructor at definite locations, allowing the engine to infer deterministically the position of x without a shape guard. this optimization can fail for a number of reasons. if the types observed at the property access are polymorphic (more than one type), this optimization cannot succeed. furthermore, even if the object type is monomorphic, the optimization will fail if the property being accessed is not a definite slot as described above. getprop_unboxed similar to getprop_definiteslot. unboxed property ...
...derived1 and derived2 for d, it can optimize the access to x to a call to the getter function defined on base. this optimization applies to shared getters on both pure js objects as well as dom objects. getprop_inlineaccess optimizes a polymorphic property access where there are only a few different types of objects seen, and the property on all of the different types is determinable through a shape-check. if a property access is monomorphic and the property's location is determinable from the object's shape, but the property is not definite (see: getprop_definiteproperty), then this optimization may be used. alternatively, if the property access is polymorphic, but only has a few different shapes observed at the access site, this optimization may be used. this optimization compiles down ...
...roperty access is monomorphic and the property's location is determinable from the object's shape, but the property is not definite (see: getprop_definiteproperty), then this optimization may be used. alternatively, if the property access is polymorphic, but only has a few different shapes observed at the access site, this optimization may be used. this optimization compiles down to one or more shape-guarded direct loads from the object. the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] elif obj.shape == shape2 then obj.slots[5] elif obj.shape == shape3 then obj.slots[2] ... end getprop_innerize attempts to optimize a situation where a property access of the form window.prop can be directly translated...
...And 3 more matches

nsACString_internal
ot be null-terminated. this type is not instantiated directly. a sub-class is instantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
... names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...timization. ...
...And 3 more matches

nsAString_internal
not be null-terminated. this type is not instantiated directly. a sub-class is instantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...ng. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...an optimization. ...
...And 3 more matches

d - SVG: Scalable Vector Graphics
0,90 q 10,60 10,30 z" /> </svg> path for <path>, d is a string containing a series of path commands that define the path to be drawn. value <string> default value none animatable yes glyph warning: as of svg2 <glyph> is deprecated and shouldn't be used. for <glyph>, d is a string containing a series of path commands that define the outline shape of the glyph. value <string> default value none animatable yes note: the point of origin (the coordinate 0,0) is usually the upper left corner of the context. however the <glyph> element has its origin in the bottom left corner of its letterbox. missing-glyph warning: as of svg2 <missing-glyph> is deprecated and shouldn't be used. for <missing-glyph>...
......
... closepath closepath instructions draw a straight line from the current position to the first point in the path. command parameters notes z, z close the current subpath by connecting the last point of the path with its initial point. if the two points are at different coordinates, a straight line is drawn between those two points. ...
...And 3 more matches

Paths - SVG: Scalable Vector Graphics
« previousnext » the <path> element is the most powerful element 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. ...
...ot 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 parameters used by those commands. each of the commands is instantiated (for example, creating a class, naming and locating it) by a specific letter. for instance, let's move to the x and y coordinates (10, 10). the "move to" command is called with the letter m. when the parser runs into this letter, it knows it needs to move to a point. so, t...
...ers—x and y coordinates—and draws a line from the current position to a new position. l x y (or) l dx dy there are two abbreviated forms for drawing horizontal and vertical lines. h draws a horizontal line, and v draws a vertical line. both commands only take one parameter since they only move in one direction. h x (or) h dx v y (or) v dy an easy place to start is by drawing a shape. we will start with a rectangle (the same type that could be more easily made with a <rect> element). it's composed of horizontal and vertical lines only. <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 h 90 v 90 h 10 l 10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> <circle cx="90" cy="90" r="2" fill="red"/> <circle cx="90" cy...
...And 3 more matches

Advanced styling effects - Learn web development
look at the mdn page for filter for many other options you could try. you can apply filters to any element and not just images. some of the filter options available do very similar things to other css features, for example drop-shadow() works in a very similar way and gives a similar effect to box-shadow or text-shadow. the really nice thing about filters however, is that they work on the exact shapes of the content inside the box, not just the box itself as one big chunk, so it is worth knowing the difference. in this next example we are applying our filter to a box, and comparing it to a box shadow. as you can see, the drop-shadow filter follows the exact shape of the text and border dashes. the box shadow just follows the square of the box. blend modes css blend modes allow us to add ...
...blend-mode: multiply; } this gives us the following results: you can see here that the multiply mix blend has blended together not only the two background images, but also the color from the <div> below it too. note: don't worry if you don't understand some of the layout properties above, like position, top, bottom, z-index, etc. we will cover these in detail in our css layout module. css shapes while it is true that everything in css is a rectangular box, and images are a physical rectangular box, we can make it look as if our content flows around non-rectangular things by using css shapes. the css shapes specification enables the wrapping of text around a non-rectangular shape. it's especially useful when working with an image which has some white-space you might want to float text ...
...look as if our content flows around non-rectangular things by using css shapes. the css shapes specification enables the wrapping of text around a non-rectangular shape. it's especially useful when working with an image which has some white-space you might want to float text around. in the image below we have a pleasingly round balloon. the actual file is rectangular, but by floating the image (shapes only apply to floated elements) and using the shape-outside property with a value of circle(50%), we can give the effect of the text following the line of the balloon. the shape in this example is not reacting to the content of the image file. instead, the circle function is taking its centre point from the centre of the image file, as if we had put a compass in the middle of the file and dra...
...And 2 more matches

Adding features to our bouncing balls demo - Learn web development
to save a separate copy of the demo after you get each stage working, so you can refer back to it if you find yourself in trouble later on. project brief our bouncy ball demo is fun, but now we want to make it a little bit more interactive by adding a user-controlled evil circle, which will eat the balls if it catches them. we also want to test your object-building skills by creating a generic shape() object that our balls and evil circle can inherit from. finally, we want to add a score counter to track the number of balls left to capture. the following screenshot gives you an idea of what the finished program should look like: to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you...
...ber of balls left to capture. the following screenshot gives you an idea of what the finished program should look like: to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you need to do. creating our new objects first of all, change your existing ball() constructor so that it becomes a shape() constructor and add a new ball() constructor: the shape() constructor should define the x, y, velx, and vely properties in the same way as the ball() constructor did originally, but not the color and size properties. it should also define a new property called exists, which is used to track whether the balls exist in the program (have not been eaten by the evil circle). this should be a boo...
...ely properties in the same way as the ball() constructor did originally, but not the color and size properties. it should also define a new property called exists, which is used to track whether the balls exist in the program (have not been eaten by the evil circle). this should be a boolean (true/false). the ball() constructor should inherit the x, y, velx, vely, and exists properties from the shape() constructor. it should also define a color and a size property, like the original ball() constructor did. remember to set the ball() constructor's prototype and constructor appropriately. the ball draw(), update(), and collisiondetect() method definitions should be able to stay exactly the same as they were before. you also need to add a new parameter to the new ball() ( ... ) constructor ...
...And 2 more matches

nsAString (External)
class declaration this header provides wrapper classes around the frozen string api which are roughly equivalent to the internal string classes. ...
...ader provides wrapper classes around the frozen string api which are roughly equivalent to the internal string classes. ...
...asses"> <area alt="" coords="963,6,1045,54" href="http://developer.mozilla.org/en/nsastring_(external)" shape="rect" title="nsastring_(external)"> <area alt="" coords="939,102,1069,150" href="http://developer.mozilla.org/en/nsstringcontainer_(external)" shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="548,198,676,246" href="http://developer.mozilla.org/en/nsstring_external" shape="rect" title="nsstring_external"> <area alt="" coords="700,198,913,246" href="http://developer.mozilla.org/en/nsdependentsubstring_external" shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="937,198,1071,246" href="http://developer.mozilla.org/en/promiseflatstring_(external)" shape="rect" title="promiseflatstring_(external)"> <area alt="" coords="1095,198,1196,246" href="ht...
...And 2 more matches

CanvasRenderingContext2D - Web APIs
see the interface's properties and methods in the sidebar and below. the canvas tutorial has more explanation, examples, and resources, as well. ...
...nment setting. possible values: start (default), end, left, right, center. canvasrenderingcontext2d.textbaseline baseline alignment setting. possible values: top, hanging, middle, alphabetic (default), ideographic, bottom. canvasrenderingcontext2d.direction directionality. possible values: ltr, rtl, inherit (default). fill and stroke styles fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes. canvasrenderingcontext2d.fillstyle color or style to use inside shapes. default #000 (black). canvasrenderingcontext2d.strokestyle color or style to use for the lines around shapes. default #000 (black). gradients and patterns canvasrenderingcontext2d.createlineargradient() creates a linear gradient along the line given by the c...
...owing methods can be used to manipulate paths of objects. canvasrenderingcontext2d.beginpath() starts a new path by emptying the list of sub-paths. call this method when you want to create a new path. canvasrenderingcontext2d.closepath() causes the point of the pen to move back to the start of the current sub-path. it tries to draw a straight line from the current point to the start. if the shape has already been closed or has only one point, this function does nothing. canvasrenderingcontext2d.moveto() moves the starting point of a new sub-path to the (x, y) coordinates. canvasrenderingcontext2d.lineto() connects the last point in the current sub-path to the specified (x, y) coordinates with a straight line. canvasrenderingcontext2d.beziercurveto() adds a cubic bézier curve to the...
...And 2 more matches

Adding 2D content to a WebGL context - Web APIs
e putting it directly in front of the camera perpendicular to the view direction. we need to define the shaders that will create the color for our simple scene as well as draw our object. these will establish how the square plane appears on the screen. the shaders a shader is a program, written using the opengl es shading language (glsl), that takes information about the vertices that make up a shape and generates the data needed to render the pixels onto the screen: namely, the positions of the pixels and their colors. there are two shader functions run when drawing webgl content: the vertex shader and the fragment shader. you write these in glsl and pass the text of the code into webgl to be compiled for execution on the gpu. together, a set of vertex and fragment shaders is called a shade...
...and their colors. there are two shader functions run when drawing webgl content: the vertex shader and the fragment shader. you write these in glsl and pass the text of the code into webgl to be compiled for execution on the gpu. together, a set of vertex and fragment shaders is called a shader program. let's take a quick look at the two types of shader, with the example in mind of drawing a 2d shape into the webgl context. vertex shader each time a shape is rendered, the vertex shader is run for each vertex in the shape. its job is to transform the input vertex from its original coordinate system into the clip space coordinate system used by webgl, in which each axis has a range from -1.0 to 1.0, regardless of aspect ratio, actual size, or any other factors. the vertex shader must perform...
...om every calculation we do in our shader. performance matters. in this example, we're not computing any lighting at all, since we haven't yet applied any to the scene. that will come later, in the example lighting in webgl. note also the lack of any work with textures here; that will be added in using textures in webgl. fragment shader the fragment shader is called once for every pixel on each shape to be drawn, after the shape's vertices have been processed by the vertex shader. its job is to determine the color of that pixel by figuring out which texel (that is, the pixel from within the shape's texture) to apply to the pixel, getting that texel's color, then applying the appropriate lighting to the color. the color is then returned to the webgl layer by storing it in the special variable ...
...And 2 more matches

repeating-radial-gradient() - CSS: Cascading Style Sheets
een and back again, repeating five times between the center and the bottom right corner, and only once between the center and the top left corner */ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); values <position> the position of the gradient, interpreted in the same way as background-position or transform-origin. if unspecified, it defaults to center. <shape> the gradient's shape. the value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-keyword> a keyword describing how big the ending shape must be. the possible values are: keyword description closest-side the gradien...
...ient's shape. the value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-keyword> a keyword describing how big the ending shape must be. the possible values are: keyword description closest-side the gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). closest-corner the gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center. ...
...t-side the gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). closest-corner the gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center. farthest-side similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). farthest-corner the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. note: early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-s...
...And 2 more matches

Object.create() - JavaScript
implementation of object.create is a shim and doesn't support a second argument."); } function f() {} f.prototype = proto; return new f(); }; } examples classical inheritance with object.create() below is an example of how to use object.create() to achieve classical inheritance. this is for a single inheritance, which is all that javascript supports. ...
...eate is a shim and doesn't support a second argument."); } function f() {} f.prototype = proto; return new f(); }; } examples classical inheritance with object.create() below is an example of how to use object.create() to achieve classical inheritance. this is for a single inheritance, which is all that javascript supports. ...
... } function f() {} f.prototype = proto; return new f(); }; } examples classical inheritance with object.create() below is an example of how to use object.create() to achieve classical inheritance. this is for a single inheritance, which is all that javascript supports. ...
...And 2 more matches

fill - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has an effect on the following eleven elements: <altglyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan>. for animation five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>. ...
...ibute fill can be used as a css property. ellipse for <ellipse>, fill is a presentation attribute that defines the color of the ellipse. value <paint> default value black animatable yes note: as a presentation attribute fill can be used as a css property. path for <path>, fill is a presentation attribute that defines the color of the interior of the shape. (interior is define by the fill-rule attribute) value <paint> default value black animatable yes note: as a presentation attribute fill can be used as a css property. polygon for <polygon>, fill is a presentation attribute that defines the color of the interior of the shape. (interior is define by the fill-rule attribute) value <paint> ...
...(interior is define by the fill-rule attribute) value <paint> default value black animatable yes note: as a presentation attribute fill can be used as a css property. rect for <rect>, fill is a presentation attribute that defines the color of the rectangle. ...
...And 2 more matches

<polyline> - SVG: Scalable Vector Graphics
the <polyline> svg element is an svg basic shape that creates straight lines connecting several points. typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point. for closed shapes see the <polygon> element. ...
...ypically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point. for closed shapes see the <polygon> element. ...
...y: 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-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
...And 2 more matches

Patterns - SVG: Scalable Vector Graphics
here, we've just drawn two rectangle elements inside the pattern (which overlap, and one of which is twice the size of the other and is used to fill in the entire pattern), and one circle. the confusing thing about patterns is defining a unit system and their si...
...f 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. ...
...the total box size. unlike gradients, patterns have a second attribute, patterncontentunits, which describes the units system used inside the pattern element, on the basic shapes themselves. this attribute defaults to "userspaceonuse", the opposite of the patternunits attribute. what this means is that unless you specify one or both of these attributes (patterncontentunits and patternunits), the shapes you draw inside your pattern are being drawn in a different coordinate system than the pattern element is using, which can make things a bit confusing when you're writing this by hand. to make this work in the example above, we had to consider the size of our box (200 pixels) and the fact that we wanted the pattern to repeat itself 4 times horizontally and vertically. this means that each patte...
...And 2 more matches

Building up a basic demo with Babylon.js - Game development
a spotlight in a given direction. add the following line below your camera definition: var light = new babylon.pointlight("light", new babylon.vector3(10, 10, 0), scene); the parameters are very similar to the previously defined camera: the name of the light, a position in 3d space and the scene to which the light is added. ...
...light("light", new babylon.vector3(10, 10, 0), scene); the parameters are very similar to the previously defined camera: the name of the light, a position in 3d space and the scene to which the light is added. geometry now the scene is properly rendering we can start adding 3d shapes to it. to speed up development babylon.js provides a bunch of predefined primitives that you can use to create shapes instantly in a single line of code. there are cubes, spheres, cylinders and more complicated shapes available. let's start by defining the geometry for a box shape — add the following new code below your previous additions: var box = babylon.mesh.createbox("box", 2, scene); a mesh is a way the engine creates geometric shapes, so material can be easily applied to them later on. in this case ...
...he one that will be visible for us. we can use the built-in color3 function to define it. the third line assigns the newly created material to our box. congratulations, you've created your first object in a 3d environment using babylon.js! it was easier than you thought, right? here's how it should look: and here's the code we have created so far: you can also check it out on github. more shapes we have a box on the scene already; now let's try adding more shapes. torus let's try adding a torus — add the following lines below the previous code: var torus = babylon.mesh.createtorus("torus", 2, 0.5, 15, scene); torus.position.x = -5; torus.rotation.x = 1.5; this will create a torus and add it to the scene; the parameters are: name, diameter, thickness, tessellation (number of segm...
... var cylindermaterial = new babylon.standardmaterial("material", scene); cylindermaterial.emissivecolor = new babylon.color3(1, 0.58, 0); cylinder.material = cylindermaterial; the cylinder parameters are: name, height, diameter at the top, diameter at the bottom, tessellation, height subdivisions and the scene to add it to. it is then positioned to the right of the cube, rotated a bit 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 s...

Test your skills: Object-oriented JavaScript - Learn web development
further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). oojs 1 in this task we provide you with a constructor. we want you to: add a new method to the shape class's prototype, calcperimeter(), which calculates its perimeter (the length of the shape's outer edge) and logs the result to the console. create a new instance of the shape class called square. give it a name of square and a sidelength of 5. call your calcperimeter() method on the instance, to see whether it logs the calculation result to the browser devtools' console as expected. create a...
...e, calcperimeter(), which calculates its perimeter (the length of the shape's outer edge) and logs the result to the console. create a new instance of the shape class called square. give it a name of square and a sidelength of 5. call your calcperimeter() method on the instance, to see whether it logs the calculation result to the browser devtools' console as expected. create a new instance of shape called triangle, with a name of triangle and a sidelength of 3. call triangle.calcperimeter() to check that it works ok. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. ...
...rowser devtools' console as expected. create a new instance of shape called triangle, with a name of triangle and a sidelength of 3. call triangle.calcperimeter() to check that it works ok. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. oojs 2 next up we want you to take the shape class you saw in task #1 (including the calcperimeter() method) and recreate it using es class syntax instead. test that it works by creating the square and triangle object instances as before (using new shape() for both), and then calling their calcperimeter() methods. try updating the live code below to recreate the finished example: download the starting point for this task to work in yo...
...ass syntax instead. test that it works by creating the square and triangle object instances as before (using new shape() for both), and then calling their calcperimeter() methods. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. oojs 3 finally, we'd like you to start with the es shape class you created in the last task. we'd like you to create a square class that inherits from shape, and adds a calcarea() method that calculates the square's area. also set up the constructor so that the name property of square object instances is automatically set to square, and the sides property is automatically set to 4. when invoking the constructor, you should therefore just need to provi...

JS_DumpHeap
that will be ignored during graph traversal. enum jsgctracekind { // these trace kinds have a publicly exposed, although opaque, c++ type. // note: the order here is determined by our value packing. other users // should sort alphabetically, for consistency. ...
...l. enum jsgctracekind { // these trace kinds have a publicly exposed, although opaque, c++ type. // note: the order here is determined by our value packing. other users // should sort alphabetically, for consistency. jstrace_object = 0x00, jstrace_string = 0x01, jstrace_symbol = 0x02, jstrace_script = 0x03, // shape details are exposed through js_traceshapecyclecollectorchildren. ...
...se trace kinds have a publicly exposed, although opaque, c++ type. // note: the order here is determined by our value packing. other users // should sort alphabetically, for consistency. jstrace_object = 0x00, jstrace_string = 0x01, jstrace_symbol = 0x02, jstrace_script = 0x03, // shape details are exposed through js_traceshapecyclecollectorchildren. jstrace_shape = 0x04, // the kind associated with a nullptr. ...
... when tracing a thing, the gc needs to know about the layout of the object it is looking at. there are a fixed number of different layouts that the gc knows about. ...

CanvasRenderingContext2D.rotate() - Web APIs
s 2d api adds a rotation to the transformation matrix. syntax void ctx.rotate(angle); parameters angle the rotation angle, clockwise in radians. you can use degree * math.pi / 180 to calculate a radian from a degree. the rotation center point is always the canvas origin. to change the center point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. note that the center of rotation is the top-left corner of the canvas, and not a location relative to any shape. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // n...
... non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); result the center of rotation is blue. the non-rotated rectangle is gray, and the rotated rectangle is red. ...
...tx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); result the center of rotation is blue. the non-rotated rectangle is gray, and the rotated rectangle is red. rotating a shape around its center this example rotates a shape around its center point. to do this, the following steps are applied to the matrix: first, translate() moves the matrix's origin to the shape's center. rotate() rotates the matrix by the desired amount. finally, translate() moves the matrix's origin back to its starting point. this is done by applying the values of the shape's center coordinates in a negative direction. html <canvas id="c...
...its horizontal center is at (80 + 140 / 2), or 150. its vertical center is at (60 + 30 / 2), or 75. thus, the center point is at (150, 75). ...

GlobalEventHandlers.oncontextmenu - Web APIs
istener() method instead, since it's more flexible. examples disabling context menus this snippet prevents context menus from opening in the window. the context menu typically appears upon a right click. html <p>try opening the context menu. ...
... disabling context menus this snippet prevents context menus from opening in the window. the context menu typically appears upon a right click. html <p>try opening the context menu. is it disabled?<p> javascript window.oncontextmenu = (e) => { e.preventdefault(); } result pausing an animation this example pauses a spinning shape whenever you open the context menu. ...
...text menu. is it disabled?<p> javascript window.oncontextmenu = (e) => { e.preventdefault(); } result pausing an animation this example pauses a spinning shape whenever you open the context menu. ...
...ote" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note'); window.oncontextmenu = pause; window.onpointerdown = play; result specifi...

A basic 2D WebGL animation example - Web APIs
am shares with us the attribute avertexposition, which is the position of the vertex in whatever coordinate system it's using. we need to convert these values so that both components of the position are in the range -1.0 to 1.0. this can be done easily enough by multiplying by a scaling factor that's based on the context's aspect ratio. we'll see that computation shortly. we're also rotating the shape, and we can do that here, by applying a transform. we'll do that first. the rotated position of the vertex is computed by applying the rotation vector, found in the uniform urotationvector, that's been computed by the javascript code. then the final position is computed by multiplying the rotated position by the scaling vector provided by the javascript code in uscalingfactor. the values of z an...
... multiplying the rotated position by the scaling vector provided by the javascript code in uscalingfactor. the values of z and w are fixed at 0.0 and 1.0, respectively, since we're drawing in 2d. the standard webgl global gl_position is then set to the transformed and rotated vertex's position. fragment shader next comes the fragment shader. its role is to return the color of each pixel in the shape being rendered. since we're drawing a solid, untextured object with no lighting applied, this is exceptionally simple: <script id="fragment-shader" type="x-shader/x-fragment"> #ifdef gl_es precision highp float; #endif uniform vec4 uglobalcolor; void main() { gl_fragcolor = uglobalcolor; } </script> this starts by specifying the precision of the float type, as required. then...
...lue floating-point vector). urotationvector is set to the current rotation vector (currentrotation), also using uniform2fv(). uglobalcolor is set using uniform4fv() to the color we wish to use when drawing the square. this is a 4-component floating-point vector (one component each for red, green, blue, and alpha). now that that's all out of the way, we can set up the vertex buffer and draw our shape, first, the buffer of vertexes that will be used to draw the triangles of the shape is set by calling bindbuffer(). then the vertex position attribute's index is obtained from the shader program by calling getattriblocation(). with the index of the vertex position attribute now available in avertexposition, we call enablevertexattribarray() to enable the position attribute so it can be used by t...
...e so it can be used by the shader program (in particular, by the vertex shader). then the vertex buffer is bound to the avertexposition attribute by calling vertexattribpointer(). this step is not obvious, since this binding is almost a side effect. but as a result, accessing avertexposition now obtains data from the vertex buffer. with the association in place between the vertex buffer for our shape and the avertexposition attribute used to deliver vertexes one by one into the vertex shader, we're ready to draw the shape by calling drawarrays(). at this point, the frame has been drawn. all that's left to do is to schedule to draw the next one. that's done here by calling requestanimationframe(), which asks that a callback function be executed the next time the browser is ready to update the...

-moz-image-region - CSS: Cascading Style Sheets
for certain xul elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image. this allows elements to use different pieces of the same image to improve performance. ...
...on: rect(0, 8px, 4px, 4px); /* global values */ -moz-image-region: inherit; -moz-image-region: initial; -moz-image-region: unset; the syntax is similar to the clip property. all four values are relative to the upper left corner of the image. note: for a system that works on any background, see -moz-image-rect(). syntax values auto automatically defines the region of the image to use. <shape> a shape defining the part of the image to use. the rect() function defines a rectangle to use as shape. its parameters define the top, right, bottom, and left offsets of the edges of the image, in this order. formal definition initial valueautoapplies toxul <image> elements and :-moz-tree-image, :-moz-tree-twisty, and :-moz-tree-checkbox pseudo-elements. note: -moz-image-region only works wi...
... in this order. formal definition initial valueautoapplies toxul <image> elements and :-moz-tree-image, :-moz-tree-twisty, and :-moz-tree-checkbox pseudo-elements. note: -moz-image-region only works with <image> elements where the icon is specified using list-style-image. ...
...rmal definition initial valueautoapplies toxul <image> elements and :-moz-tree-image, :-moz-tree-twisty, and :-moz-tree-checkbox pseudo-elements. note: -moz-image-region only works with <image> elements where the icon is specified using list-style-image. ...

filter - CSS: Cascading Style Sheets
rop-shadow)"/> <use xlink:href="#myimage"/> </svg> </div> </td> <td><img alt="test_form_4_s.jpg" id="img4" class="internal default" src="/files/3715/test_form_4_s.jpg" style="width: 100%;" /></td> </tr> <tr> <td><img alt="test_form_4 distorded border - original image" id="img11" class="internal default" src="/files/8467/test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> <td><img alt="test_form_4 distorded border - live example" id="img12" class="internal default" src="/files/8467/test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" co...
..."internal default" src="/files/8467/test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="srgb"> <defs> <image id="myimage2" xlink:href="/files/8467/test_form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/> </defs> <filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%"> <feoffset dx="5" dy="5.5" in="sourcealpha"/> <fegaussianblur stddeviation="2.5"/> <fecomponenttransfer> <fefunca type="table" tablevalues="0 0.8"/> </fecomponenttransfer>...
...="table" tablevalues="0 0.8"/> </fecomponenttransfer> </filter> <use xlink:href="#myimage2" filter="url(#drop-shadow2)"/> <use xlink:href="#myimage2"/> </svg> </div> </td> <td><img alt="test_form_4 distorded border drop shadow - static example" id="img14" class="internal default" src="/files/8469/test_form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter: drop-shadow(16px 16px 10px black); -webkit-filter: ...
...ilter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; width: 85%; height: 100%; } #irregular-shape { width: 64%; } 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...

text-emphasis - CSS: Cascading Style Sheets
t use. it may be computed to or rendered as 'f' only */ /* keywords value */ text-emphasis: filled; text-emphasis: open; text-emphasis: filled sesame; text-emphasis: open sesame; /* keywords value combined with a color */ text-emphasis: filled sesame #555; /* global values */ text-emphasis: inherit; text-emphasis: initial; text-emphasis: unset; values none no emphasis marks. ...
......
... is given. double-circle display double circles as marks. the filled double-circle is '◉' (u+25c9), and the open double-circle is '◎' (u+25ce). triangle display triangles as marks. the filled triangle is '▲' (u+25b2), and the open triangle is '△' (u+25b3). sesame display sesames as marks. the filled sesame is '﹅' (u+fe45), and the open sesame is '﹆' (u+fe46). this is the default shape in vertical writing modes when no other shape is given. <string> display the given string as marks. authors should not specify more than one character in <string>. the ua may truncate or ignore strings consisting of more than one grapheme cluster. <color> defines the color of the mark. if no color is present, it defaults to currentcolor. formal definition initial valueas each of the proper...
... css h2 { text-emphasis: triangle #d55; } html <h2>this is important!</h2> result specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification. candidate recommendation initial definition ...

points - SVG: Scalable Vector Graphics
f points. each point is defined by a pair of number representing a x and a y coordinate in the user coordinate system. if the attribute contains an odd number of coordinates, the last one will be ignored. two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="50,0 21,90 98,35 2,35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by a space. it makes things more readable...
...aly considered best practices to separate a x and y coordinate with a comma and a group of coordinates by a space. it makes things more readable for human beings. --> </svg> polyline for <polyline>, points defines a list of points, each representing a vertex of the line to be drawn. each point is define by a x and y coordinate in the user coordinate system. ...
...int is define by a x and y coordinate in the user coordinate system. note: a polyline is an open shape, meaning the last point is not connected to the first point. value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn. each point is define by a x and y coordinate in the user coordinate system. note: a polygon is a closed shape, meaning the last point is connected to the first point. value [ <numb...
... point is define by a x and y coordinate in the user coordinate system. note: a polygon is a closed shape, meaning the last point is connected to the first point. value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon is an closed shape --> <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'points' in that specification. candidate recommendation definition for <polygon> scalable vector graphics (svg) 2the definition of 'points' in that specification. ...

requiredFeatures - SVG: Scalable Vector Graphics
ures: http://www.w3.org/tr/svg11/feature#coreattribute http://www.w3.org/tr/svg11/feature#structure http://www.w3.org/tr/svg11/feature#containerattribute http://www.w3.org/tr/svg11/feature#conditionalprocessing http://www.w3.org/tr/svg11/feature#image http://www.w3.org/tr/svg11/feature#style http://www.w3.org/tr/svg11/feature#viewportattribute http://www.w3.org/tr/svg11/feature#shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http://www.w3.org/tr/svg11/feature#graphicsattribute http://www.w3.org/tr/svg11/feature#marker http://www.w3.org/tr/svg11/feature#colorprofile http://www.w3.org/tr/svg11/feature#gradient http://www.w3.org/tr/svg11/feature#pattern http://ww...
...d the requiredfeatures, requiredextensions, systemlanguage attributes http://www.w3.org/tr/svg11/feature#image the browser supports the <image> element. http://www.w3.org/tr/svg11/feature#style the browser supports the <style> element. http://www.w3.org/tr/svg11/feature#viewportattribute the browser supports the clip and overflow attributes. http://www.w3.org/tr/svg11/feature#shape the browser supports the <rect>, <circle>, <line>, <polyline>, <polygon>, <ellipse> and <path> elements. http://www.w3.org/tr/svg11/feature#text the browser supports the <text>, <tspan>, <tref>, <textpath>, <altglyph>, <altglyphdef>, <altglyphitem> and <glyphref> elements. http://www.w3.org/tr/svg11/feature#basictext the browser supports the <text> element http://www.w3.org/tr/s...
...roke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width and color-rendering attributes http://www.w3.org/tr/svg11/feature#opacityattribute the browser supports the opacity, stroke-opacity and fill-opacity attributes http://www.w3.org/tr/svg11/feature#graphicsattribute the browser supports the display, image-rendering, pointer-events, shape-rendering, text-rendering and visibility attributes http://www.w3.org/tr/svg11/feature#basicgraphicsattribute the browser supports the display and visibility attributes http://www.w3.org/tr/svg11/feature#marker the browser supports the <marker> element http://www.w3.org/tr/svg11/feature#colorprofile the browser supports the <color-profile> element http://www.w3.org/tr/svg11/f...
...esting : http://www.w3.org/tr/svg11/feature#viewportattribute --> <rect class="ko" x="10" y="385" height="25" width="430" /> <rect class="ok" x="10" y="385" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#viewportattribute" /> <text x="20" y="402">http://www.w3.org/tr/svg11/feature#viewportattribute</text> <!-- testing : http://www.w3.org/tr/svg11/feature#shape --> <rect class="ko" x="10" y="410" height="25" width="430" /> <rect class="ok" x="10" y="410" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#shape" /> <text x="20" y="427">http://www.w3.org/tr/svg11/feature#shape</text> <!-- testing : http://www.w3.org/tr/svg11/feature#text --> <rect class="ko" x="10" y="435" height="25" width="430" /> <rect class="ok...

stroke-opacity - SVG: Scalable Vector Graphics
note: as a presentation attribute stroke-opacity can be used as a css property. ...
...notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 introduces percentage values for stroke-opacity, however, it is not widely supported yet (see browser compatibility below) as a consequence, it is best practices to set opacity with a value in the range [0-1]. it's important to know that the stroke partially covers the fill of a shape, so a stroke with an opacity different than 1 will partially show the fill underneath. to avoid this effect, it is possible to apply a global opacity with the opacity attribute or to put the stroke behind the fill with the paint-order attribute. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out...
... samsung internet android ? ...
...ity unknown specification specification status comment scalable vector graphics (svg) 2the definition of 'stroke-opacity' in that specification. ...

stroke-width - SVG: Scalable Vector Graphics
the stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. ...
... the stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. ...
...? samsung internet android ? ...
...ibility unknown specification specification status comment scalable vector graphics (svg) 2the definition of 'stroke-width' in that specification. ...

<a> - SVG: Scalable Vector Graphics
the <a> svg element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other url. it is very similar to html’s <a> element. svg's <a> element is a container, which means you can create a link around text (like in html) but also around any shape. ...
... locations in the same page, email addresses, or any other url. it is very similar to html’s <a> element. svg's <a> element is a container, which means you can create a link around text (like in html) but also around any shape. ...
... class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-des...
... candidate ...

<circle> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the center of the circle. value type: <length>|<percentage> ; default value: 0; animatable: yes cy the y-axis coordinate of the center of the circle. value type: <length>|<percentage> ; default value: 0; animatable: yes r the radius of the circle. a value lower or equal to zero disables rendering of the circle. value type: <length> ; default value: 0; animatable: yes pathlength the total length for the circle's circumference, in user units. ...
...y: 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-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... candidate recommendation scalable vector graphics (svg) 1.1 (second edition)t...
... candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of '<circle>' in th...

<ellipse> - SVG: Scalable Vector Graphics
note: ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute. html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. value type: <length>|<percentage> ; default value: 0; animatable: yes cy the y position of the ellipse. ...
...y: 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-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... candidate recommendation added auto value for rx and ry scalable vector graphi...
... candidate recommendation added auto value for rx and ry scalable vector graphics (svg) 1.1 (second edition)the ...

<line> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> <!-- if you do not specify the stroke color the line will not be visible --> </svg> attributes x1 defines the x-axis coordinate of the line starting point. value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes x2 defines the x-axis coordinate of the line ending point. value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes y1 defines the y-axis coordinate of the line starting point. ...
...y: 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-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... candidate recommendation changed the x1, y1, x2 and y2 attributes to take <length>s, <perc...
... candidate recommendation changed the x1, y1, x2 and y2 attributes to take <length>s, <percentage>s and <number>s s...

<marker> - SVG: Scalable Vector Graphics
the <marker> element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given <path>, <line>, <polyline> or <polygon> element. markers are attached to shapes using the marker-start, marker-mid, and marker-end properties. html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- arrowhead marker definition --> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <!-- simple dot marker definition --> <marker id="dot" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="5" markerheight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker> <...
...fines the coordinate system for the attributes markerwidth, markerheight and the contents of the <marker>. value type: userspaceonuse|strokewidth ; default value: strokewidth; animatable: yes markerwidth this attribute defines the width of the marker viewport. value type: <length> ; default value: 3; animatable: yes orient this attribute defines the orientation of the marker relative to the shape it is attached to. value type: auto|auto-start-reverse|<angle> ; default value: 0; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|slice)? ; default value: xmidymid me...
...ne; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... working draft ...

<path> - SVG: Scalable Vector Graphics
value type: <string> ; default value: ''; animatable: yes pathlength this attribute lets authors specify the total length for the path, in user units. ...
... value type: <string> ; default value: ''; animatable: yes pathlength this attribute lets authors specify the total length for the path, in user units. ...
...y: 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-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... working draft scalable vector graphics (svg) 2the definition of '<path>' in that specification. candidate recommendation ...

<polygon> - SVG: Scalable Vector Graphics
the <polygon> element defines a closed shape consisting of a set of connected straight line segments. the last point is connected to the first point. for open shapes, see the <polyline> element. html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polygon with the default fill --> <polygon points="0,100 50,25 50,75 100,0" /> <!-- example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon. value type: <number>+ ; default value: ""; animatable: yes pathlength this attribute lets specify the tot...
...y: 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-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... candidate recommendation no change scalable vector graphics (svg) 1.1 (second ...
... candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of '<polyg...

<rect> - SVG: Scalable Vector Graphics
the rectangles may have their corners rounded. html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple rectangle --> <rect width="100" height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg> attributes x the x coordinate of the rect. value type: <length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the rect. value type: <length>|<percentage> ; default value: 0; animatable: yes width the width of the rect. ...
...y: 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-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the...
... candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of '<rect>' in that s...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
path commands to add path coordinate data to previous command implementation status unknown not render <path>, <polygon> and <polyline> with no data implementation status unknown svgpathseg*, svganimatedpathdata and related methods removed from svgpathelement implementation status unknown d attribute as css property implementation status unknown basic shapes change notes pathlength attribute for all basic shapes implementation status unknown svganimatedpoints.animatedpoints as alias of svganimatedpoints.points implementation status unknown auto behavior for rx and ry in <ellipse> implementation status unknown text change notes text-decoration-fill and text-decorati...
....animatedpoints as alias of svganimatedpoints.points implementation status unknown auto behavior for rx and ry in <ellipse> implementation status unknown text change notes text-decoration-fill and text-decoration-stroke properties not implemented yet (bug 1303569) inline-size attribute for <text> implementation status unknown shape-inside property inplementation status unknown shape-subtract property inplementation status unknown white-space implementation status unknown deprecated xml:space attribute implementation status unknown kerning property removed implementation status unknown path attribute for <textpath> implemented (bug 1446617) reference bas...
...side property inplementation status unknown shape-subtract property inplementation status unknown white-space implementation status unknown deprecated xml:space attribute implementation status unknown kerning property removed implementation status unknown path attribute for <textpath> implemented (bug 1446617) reference basic shapes to <textpath> implementation status unknown side attribute for <textpath> implemented (bug 1446650) render characters for one loop of a single closed path, effected by the startoffset attribute and text-anchor property implementation status unknown <tref> removed implementation status unknown <altglyph>, <altglyphdef>, <altglyphitem> and <glyphref>...
...79659) svgpaint removed implementation status unknown fill and stroke taking multiple paints implementation status unknown z-index not implemented (bug 360148 child(<integer>) paint value implementation status unknown display of zero-length subpaths depends on stroke-linecap attribute implementation status unknown markers on all shapes implementation status unknown <marker> element display defined in ua style sheet implementation status unknown only single paints for fills and strokes implementation status unknown color change notes color managed images implementation status unknown rgba, hsl, lab, icc named colors and device colors implementation statu...

CSS3 - Archive of obsolete content
f the element with the css box-shadow property. the css4 iteration of the backgrounds and borders specification is already in progress, though it still hasn't reached the first public working draft stage, it plans to add the ability to clip a border (with the css border-clip, border-clip-top, border-clip-right, border-clip-bottom, and border-clip-left properties) or to control the shape of the border in a corner (using the css border-corner-shape property). css conditional rules module level 3 candidate recommendation adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. it consists mainly in allowing nested at-rules inside @media and the adding of a...
...cript shadows with the css text-shadow property. clarifies: the paint order of the decorations. at risk: due to insufficient browser support, standardization of the text-decoration-skip, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to the next iteration of this module. css shapes module level 1 candidate recommendation defines geometric shapes, which can be applied to floats. these shapes describe areas, around which inline content wraps instead of wrapping around the bounding box. css masking module level 1 candidate recommendation defines a way for partially or fully hiding portions of visual elements. it describes how to use ano...
... css device adaptation working draft adds a new at-rule, @viewport, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block. css exclusions module level 1 working draft extends the floats mechanism to define exclusion regions in any positioning scheme. adds the notion of shapes, in which content must flows. filter effects module level 1 working draft css generated content for paged media module working draft adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content. css page floats working draft ...

Bounding volume collision detection with THREE.js - Game development
this article shows how to implement collision detection between bounding boxes and spheres using the three.js library. it is assumed that before reading this you have read our 3d collision detection introductory article first, and have basic knowledge about three.js. using box3 and sphere three.js has objects that represent mathematical volumes and shapes — for 3d aabb and bounding spheres we can use the box3 and sphere objects. once instantiated, they have methods available to do intersection tests against other volumes. instantiating boxes to create a box3 instance, we need to provide the lower and upper boundaries of the box. usually we will want this aabb to be "linked" to an object in our 3d world (like a character.) in three.js, geometry instances have a boundingbox property with m...
...ng boxhelper as an alternative to using raw box3 and sphere objects, three.js has a useful object to make handling bounding boxes easier: boxhelper (previously boundingboxhelper, which has been deprecated). this helper takes a mesh and calculates a bounding box volume for it (including its child meshes). this results in a new box mesh representing the bounding box, which shows the bounding box's shape, and can passed to the previously seen setfromobject method in order to have a bounding box matching the mesh. boxhelper is the recommended way to handle 3d collisions with bounding volumes in three.js. you will miss sphere tests, but the tradeoffs are well worth it. the advantages of using this helper are: it has an update() method that will resize its bounding box mesh if the linked mesh...
...three.js scene in order to render it. we assume our scene variable to be simply called scene. var knot = new three.mesh( new 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...

GLSL Shaders - Game development
glsl is not as intuitive as javascript. glsl is strongly typed and there is a lot of math involving vectors and matrices. ...
... glsl is not as intuitive as javascript. glsl is strongly typed and there is a lot of math involving vectors and matrices. ...
... very complicated — very quickly. in this article we will make a simple code example that renders a cube. to speed up the background code we will be using the three.js api. as you may remember from the basic theory article, a vertex is a point in a 3d coordinate system. vertices may, and usually do, have additional properties. the 3d coordinate system defines space and the vertices help define shapes in that space. shader types a shader is essentially a function required to draw something on the screen. shaders run on a gpu (graphics processing unit), which is optimized for such operations. using a gpu to deal with shaders offloads some of the number crunching from the cpu. this allows the cpu to focus its processing power on other tasks, like executing code. vertex shaders vertex shader...

Adding vector graphics to the Web - Learn web development
of image — raster images, and vector images: raster images are defined using a grid of pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be. popular web raster formats include bitmap (.bmp), png (.png), jpeg (.jpg), and gif (.gif.) vector images are defined using algorithms — a vector image file contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen. the svg format allows us to create powerful vector graphics for use on the web. to give you an idea of the difference between the two, let's look at an example. you can find this example live on our github repo as vector-versus-raster.html — it shows two seemingly identical ...
...page — the png image becomes pixellated as you zoom 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 ...
...l 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, rather than information on every pixel in the image individually. what is svg? svg is an xml-based language for describing vector images. it's basically markup, like html, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. svg is for marking up graphics, not content. at the simplest end of the spectrum, you've got elements for creating simple shapes, like <circle> and <rect>. more advanced svg features include <fecolormatrix> (transform colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <m...

Bytecode Descriptions
the top of the stack. implements: import calls. importmeta stack: ⇒ import.meta push the import.meta object. this must be used only in module code. objects creating objects newinit stack: ⇒ obj create and push a new object with no properties. format: jof_ic newobject, newobjectwithgroup operands: (uint32_t baseobjindex) stack: ⇒ obj create and push a new object of a predetermined shape. the new object has the shape of the template object script->getobject(baseobjindex). subsequent initprop instructions must fill in all slots of the new object before it is used in any other way. for jsop::newobject, the new object has a group based on the allocation site (or a new group if the template's group is a singleton). for jsop::newobjectwithgroup, the new object has the same group as th...
...he new object has a group based on the allocation site (or a new group if the template's group is a singleton). for jsop::newobjectwithgroup, the new object has the same group as the template object. format: jof_object, jof_ic object operands: (uint32_t objectindex) stack: ⇒ obj push a preconstructed object. going one step further than jsop::newobject, this instruction doesn't just reuse the shape--it actually pushes the preconstructed object script->getobject(objectindex) right onto the stack. the object must be a singleton plainobject or arrayobject. the spec requires that an objectliteral or arrayliteral creates a new object every time it's evaluated, so this instruction must not be used anywhere it might be executed more than once. there's a shell-only option, newglobal({clonesingleton...
... actually stored in the intrinsics holder object, globalobject::getintrinsicsholder. (self-hosted code doesn't have many global vars, but it has many functions.) format: jof_atom, jof_name entering and leaving environments pushlexicalenv operands: (uint32_t lexicalscopeindex) push a lexical environment onto the environment chain. the lexicalscope indicated by lexicalscopeindex determines the shape of the new lexicalenvironmentobject. all bindings in the new environment are marked as uninitialized. implements: evaluation of block, steps 1-4. fine print for environment chain instructions the following rules for jsop::{push,pop}lexicalenv also apply to jsop::pushvarenv and jsop::{enter,leave}with. each jsop::poplexicalenv instruction matches a particular jsop::pushlexicalenv instruction in th...

Invariants
function whose scope chain ends in a different global object. (if it is a script function, global names accessed in that function would refer to a different global object. ...
...e chain ends in a different global object. (if it is a script function, global names accessed in that function would refer to a different global object. even if the function is native, there is serious trouble: js_newobject with null parent argument calculates the parent from cx->fp->scopechain, which can be stale if we're on trace.) the chain of properties starting at any jsshape and chasing jsshape::parent never forms a cycle and does not contain any duplicate jsscopeproperty::slot values other than -1. (a cycle would be very silly and could cause infloops. the same slot being allocated to more than one property would be a problem for obvious reasons.) all jsshapes in dictionary-mode objects have the in_dictionary flag set. all jsshapes in property trees have it cleared. if an object is i...
...cts, but this is not a hard fast rule, especially for strings. some jsstrings are allocated on the stack for quick operations. some commonly used strings are allocated statically; see jsstring::isstatic(). most jscontext pointers must point to live contexts, but jstitle::ownercx may point to one that has been destroyed! so code must check js_validcontextpointer(ownercx) before dereferencing it. shape invariants the shape guarantees hold whenever the property cache is enabled. also, we never change the shape of the global object on trace. (here "the global object" refers to the object at the end of the scope chain of the function object we're executing.) requests many functions require a request. that is, they take a parameter cx of type jscontext *, and require that cx is in a request on...

An Overview of XPCOM
her very important topic in object oriented programming. inheritance is the means through which one class is derived from another. when a class inherits from another class, the inheriting class may override the default behaviors of the base class without having to copy all of that class's code, in effect creating a more specific class, as in the following example: simple class inheritance class shape { private: int m_x; int m_y; public: virtual void draw() = 0; shape(); virtual ~shape(); }; class circle : public shape { private: int m_radius; public: virtual draw(); circle(int x, int y, int radius); virtual ~circle(); }; circle is a derived class of shape. a circle is a shape, in other words, but a shape is not necessarily a circle. in this case...
... private: int m_x; int m_y; public: virtual void draw() = 0; shape(); virtual ~shape(); }; class circle : public shape { private: int m_radius; public: virtual draw(); circle(int x, int y, int radius); virtual ~circle(); }; circle is a derived class of shape. a circle is a shape, in other words, but a shape is not necessarily a circle. in this case, shape is the base class and circle is a subclass of shape. in xpcom, all classes derive from the nsisupports interface, so all objects are nsisupports but they are also other, more specific classes, which you need to be able to find out about at runtime. in simple class inheritance, for example, you'd like to be able ask the shape if it's a circle and to be able to use it like a circle if it is. in xp...
...but enabling exceptions and rtti may not be an option because of performance overhead and compatibility on many platforms, so xpcom does things differently. exceptions in xpcom c++ exceptions are not supported directly by xpcom. ...

nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="1005,6,1096,54" href="http://developer.mozilla.org/en/nsacstring_(external)" shape="rect" title="nsacstring_(external)"> <area alt="" coords="980,102,1121,150" href="http://developer.mozilla.org/en/nscstringcontainer_(external)" shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="571,198,707,246" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstring...
...198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstring_(external)"> <area alt="" coords="1147,198,1259,246" href="http://developer.mozilla.org/en/nscautostring_(external)" shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,294,208,342" href="http://developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,475,342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="499,294,779,342" href="...
...08,342" href="http://developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,475,342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="499,294,779,342" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="803,294,925,342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(external)"></map> method overview beginreading endreading charat operator[] first beginwriting endwriting setlength length...

CanvasRenderingContext2D.arc() - Web APIs
/canvas> javascript the arc is given an x-coordinate of 100, a y-coordinate of 75, and a radius of 50. to make a full circle, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (360°). ...
...rdinate of 100, a y-coordinate of 75, and a radius of 50. to make a full circle, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (360°). const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(100, 75, 50, 0, 2 * math.pi); ctx.stroke(); result different shapes demonstrated this example draws various shapes to show what is possible with arc(). ...
...lector('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(100, 75, 50, 0, 2 * math.pi); ctx.stroke(); result different shapes demonstrated this example draws various shapes to show what is possible with arc(). ...

CanvasRenderingContext2D.lineJoin - Web APIs
the canvasrenderingcontext2d.linejoin property of the canvas 2d api determines the shape used to join two line segments where they meet. this property has no effect wherever two connected segments have the same direction, because no joining area will be added in this case. degenerate segments with a length of zero (i.e., with all endpoints and control points at the exact same position) are also ignored. note: lines can be drawn with the stroke(), strokerect(), and stroketext() methods. syntax ctx.linejoin = "bevel" || "round" || "miter"; options there are three possible values for this property: "round", "bevel", and "miter". the default is "miter". ...
...of zero (i.e., with all endpoints and control points at the exact same position) are also ignored. note: lines can be drawn with the stroke(), strokerect(), and stroketext() methods. syntax ctx.linejoin = "bevel" || "round" || "miter"; options there are three possible values for this property: "round", "bevel", and "miter". the default is "miter". "round" rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. the radius for these rounded corners is equal to the line width. "bevel" fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment. "miter" connected segments are joined by extending their outside edges to conn...
... of connected segments. the radius for these rounded corners is equal to the line width. "bevel" fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment. "miter" connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. this setting is affected by the miterlimit property. default value. examples changing the joins in a path this example applies rounded line joins to a path. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 20; ctx.linejoin = 'round'; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(...

Compositing example - Web APIs
'destination-over','destination-in','destination-out','destination-atop', 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ].reverse(); var gcotext = [ 'this is the default setting and draws new shapes on top of the existing canvas content.', 'the new shape is drawn only where both the new shape and the destination canvas overlap. everything else is made transparent.', 'the new shape is drawn where it doesn\'t overlap the existing canvas content.', 'the new shape is only drawn where it overlaps the existing canvas content.', 'new shapes are drawn behind the existing canvas content.', 'the exis...
... new shape is drawn only where both the new shape and the destination canvas overlap. everything else is made transparent.', 'the new shape is drawn where it doesn\'t overlap the existing canvas content.', 'the new shape is only drawn where it overlaps the existing canvas content.', 'new shapes are drawn behind the existing canvas content.', 'the existing canvas content is kept where both the new shape and existing canvas content overlap. everything else is made transparent.', 'the existing content is kept where it doesn\'t overlap the new shape.', 'the existing canvas is only kept where it overlaps the new shape. ...
...rawn where it overlaps the existing canvas content.', 'new shapes are drawn behind the existing canvas content.', 'the existing canvas content is kept where both the new shape and existing canvas content overlap. everything else is made transparent.', 'the existing content is kept where it doesn\'t overlap the new shape.', 'the existing canvas is only kept where it overlaps the new shape. the new shape is drawn behind the canvas content.', 'where both shapes overlap the color is determined by adding color values.', 'only the new shape is shown.', 'shapes are made transparent where both overlap and drawn normal everywhere else.', 'the pixels are of the top layer are multiplied with the corresponding pixel of the bottom layer. a darker picture is the result.', 'the pixels are inverted, multiplied...

Compositing and clipping - Web APIs
« previousnext » in all of our previous examples, shapes were always drawn one on top of the other. this is more than adequate for most situations, but it limits the order in which composite shapes are built. we can, however, change this behaviour by setting the globalcompositeoperation property. in addition, the clip property allows us to hide unwanted parts of shapes. globalcompositeoperation 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 clearrect() method does) and more. ...
... clip property allows us to hide unwanted parts of shapes. globalcompositeoperation 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 clearrect() method does) and more. globalcompositeoperation = type this sets the type of compositing operation to apply when drawing new shapes, where type is a string identifying which of the twelve compositing operations to use. see compositing examples for the code of the following examples. clipping paths a clipping path is like a normal canvas shape but it acts as a mask to hide unwanted parts of shapes. this is visualized in the image on the right. the red star shape is our clipping path. everything that falls outside of thi...
...e of this path won't get drawn on the canvas. if we compare clipping paths to the globalcompositeoperation property we've seen above, we see two compositing modes that achieve more or less the same effect in source-in and source-atop. the most important differences between the two are that clipping paths are never actually drawn to the canvas and the clipping path is never affected by adding new shapes. this makes clipping paths ideal for drawing multiple shapes in a restricted area. in the chapter about drawing shapes i only mentioned the stroke() and fill() methods, but there's a third method we can use with paths, called clip(). clip() turns the path currently being built into the current clipping path. you use clip() instead of closepath() to close a path and turn it into a clipping...

WebGL model view projection - Web APIs
his point the w value of the transformed point is still 1.0. the cube still doesn't have any perspective. the next section will take this setup and modify the w values to provide some perspective. exercises shrink down the box using the scale matrix and position it in different places within clip space. try moving it outside of clip space. resize the window and watch as the box skews out of shape. add a rotatez matrix. divide by w an easy way to start getting some perspective on our model of the cube is to take the z coordinate and copy it over to the w coordinate. normally when converting a cartesian point to homogeneous it becomes (x,y,z,1), but we're going to set it to something like (x,y,z,z). in reality we want to make sure that z is greater than 0 for points in view, so we'll mo...
...ch is typically ranged -1 to 1, then scale // it to be from 0 to some number, in this case 0-1. float w = (1.0 + transformedposition.z) * scalefactor; // save the new gl_position with the custom w component gl_position = vec4(transformedposition.xyz, w); the results view on jsfiddle see that small dark blue triangle? that's an additional face added to our object because the rotation of our shape has caused that corner to extend outside clip space, thus causing the corner to be clipped away. see perspective projection matrix below for an introduction to how to use more complex matrices to help control and prevent clipping. exercise if that sounds a little abstract, open up the vertex shader and play around with the scale factor and watch how it shrinks vertices more towards the surface.
... the scene. the objects are distorted much less by perspective and objects seem much closer to the camera aspectratio the scene's aspect ratio, which is equivalent to its width divided by its height. in these examples, that's the window's width divided by the window height. the introduction of this parameter finally solves the problem wherein the model gets warped as the canvas is resized and reshaped. nearclippingplanedistance a positive number indicating the distance into the screen to a plane which is perpendicular to the floor, nearer than which everything gets clipped away. this is mapped to -1 in clip space, and should not be set to 0. farclippingplanedistance a positive number indicating the distance to the plane beyond which geometry is clipped away. this is mapped to 1 in clip sp...

XRBoundedReferenceSpace.boundsGeometry - Web APIs
ecifies the points making up a polygon inside which the viewer is allowed to move. each point is treated as a two-dimensional point, and must be located at ground level (that is, its y coordinate must be 0). this boundary is typically configured by the user, using the software that controls their xr hardware. this may be done by walking the border of the space they wish to use, or by drawing the shape of their room using their xr input device. theoretically, a more advanced system might use sensors or other detection methods to determine the bounds of a dedicated xr room (notice how we carefully don't call it a holodeck?). syntax bounds = xrreferencespace.boundsgeometry; value the boundsgeometry property is an array of dompointreadonly objects, each of which defines one vertex in a polygon...
...of available movement space in any direction from the native origin. that said, the bounds extend upward indefinitely, since the bounds are defined in only two dimensions. if you need to create a multi-room space, or a space which is very large or needs to have varying floor levels, you should instead use an unbounded xrreferencespace and enforce the bounds on your own, as appropriate. boundary shape the shape defined by boundsgeometry may be as simple as a square or as complex as is needed, potentially including concave and/or convex sections. however, you can't represent spaces with uneven floor levels using xrboundedreferencespace. the ground is always at y = 0. it's important that your content not be designed to require the user to exit the bounds specified by boundsgeometry. however, i...
...e ground is always at y = 0. it's important that your content not be designed to require the user to exit the bounds specified by boundsgeometry. however, if the user's surroundings permit them to move in such a way as to exit the defined bounds, your content must be able to gracefully handle the situation, which is not considered an error condition. although some samples render a mesh or other shape to display the bounds to the user, in a real-world application, you shouldn't do this. the browser, however, should provide appropriate warnings to the user about any risks (such as the risk that they might run into a physical wall if they keep moving). specifications specification status comment webxr device apithe definition of 'boundsgeometry' in that specification. ...

CSS data types - CSS: Cascading Style Sheets
ts) accepted by css properties and functions. they are a special kind of component value type. in formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">". ...
... ...
... <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment css values and units module level 4 editor's draft css values and units module level 3 candidate recommendation initial definition. see also c...

clip - CSS: Cascading Style Sheets
the clip css property defines a visible portion of an element. the clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed. /* keyword value */ clip: auto; /* <shape> values */ clip: rect(1px 10em 3rem 2ch); clip: rect(1px, 10em, 3rem, 2ch); /* global values */ clip: inherit; clip: initial; clip: unset; syntax note: where possible, authors are encouraged to use the newer clip-path property instead. values <<shape>()> a rectangular <<shape>()> of the form rect(<top> <right> <bottom> <left>). the <top> and <bottom> values are offsets from the inside top border edge of the box, while <right> and <left> are offsets from the inside left border edge of the box — that is, the extent of the padding box. the <top>, <rig...
...ault). this is different from rect(auto, auto, auto, auto), which clips to the element’s inside border edges. ...
...rent from rect(auto, auto, auto, auto), which clips to the element’s inside border edges. ...

content - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )<counter-style> = <counter-style-name> | symbols()where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb(...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...
...internet">i was lucky enough to invent the web at the time when the internet already existed - and had for a decade and a half.</q> we must understand that there is nothing fundamentally wrong with building on the contributions of others. </p> <h1>6</h1> <p>according to the mozilla manifesto, <q cite="http://www.mozilla.org/about/manifesto/">individuals must have the ability to shape the internet and their own experiences on the internet.</q> therefore, we can infer that contributing to the open web can protect our own individual experiences on it. </p> css q { color: blue; } q::before { content: open-quote; } q::after { content: close-quote; } h1::before { content: "chapter "; /* the trailing space creates separation between ...

mask - CSS: Cascading Style Sheets
| center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<geometry-box> = <shape-box> | fill-box | stroke-box | view-box<compositing-operator> = add | subtract | intersect | exclude<masking-mode> = alpha | luminance | match-sourcewhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url><length-percentage> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>? [ <image...
...<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><angular...

Expressions and operators - JavaScript
ice. typeof the typeof operator is used in either of the following ways: typeof operand typeof (operand) the typeof operator returns a string indicating the type of the unevaluated operand. operand is the string, variable, keyword, or object for which the type is to be returned. the parentheses are optional. ...
...variable, keyword, or object for which the type is to be returned. the parentheses are optional. ...
... type of value the property contains: typeof document.lastmodified; // returns "string" typeof window.length; // returns "number" typeof math.ln2; // returns "number" for methods and functions, the typeof operator returns results as follows: typeof blur; // returns "function" typeof eval; // returns "function" typeof parseint; // returns "function" typeof shape.split; // returns "function" for predefined objects, the typeof operator returns results as follows: typeof date; // returns "function" typeof function; // returns "function" typeof math; // returns "object" typeof option; // returns "function" typeof string; // returns "function" void the void operator is used in either of the following ways: void (expression) void expression ...

Media - Progressive web apps (PWAs)
e:link any e element that is a hyperlink to a url that the user has not visited recently e:visited any e element that is a hyperlink to a url that the user has visited recently note: the information that can be obtained from the :visited selector is restricted in gecko 2.0. see privacy and the : visited selector for more details. ...
...a hyperlink to a url that the user has not visited recently e:visited any e element that is a hyperlink to a url that the user has visited recently note: the information that can be obtained from the :visited selector is restricted in gecko 2.0. see privacy and the : visited selector for more details. the cursor property specifies the shape of the pointer: some of the common shapes are as follows. ...
...t that is a hyperlink to a url that the user has visited recently note: the information that can be obtained from the :visited selector is restricted in gecko 2.0. see privacy and the : visited selector for more details. the cursor property specifies the shape of the pointer: some of the common shapes are as follows. place your mouse over the items in this list to see the actual pointer shapes in your browser: selector selects pointer indicating a link wait indicating that the program cannot accept input progress indicating that the program is working, but can still accept input default the default (usually an arrow) an outline property creates an outline that is often used to indicate keyboard focus. its values a...

clip-path - SVG: Scalable Vector Graphics
this is the same as having a custom clipping path with a clippathunits set to objectboundingbox --> <rect x="11" y="1" width="8" height="8" stroke="green" clip-path="circle() fill-box" /> <!-- bottom-left --> <rect x="1" y="11" width="8" height="8" stroke="green" clip-path="circle() stroke-box" /> <!-- bottom-right: apply a css basic...
...on a fill-box geometry. ...
...8" stroke="green" clip-path="circle() stroke-box" /> <!-- bottom-right: apply a css basic shape on a view-box geometry. this is the same as having a custom clipping path with a clippathunits set to userspaceonuse --> <rect x="11" y="11" width="8" height="8" stroke="green" clip-path="circle() view-box" /> </svg> usage notes value <url> | [ <basic-shape> || <geometry-box> ] | none default value none animatable yes <geometry-box> an extra information to tell how a <basic-shape> is applied to an element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the reference box. note: for...

fill-opacity - SVG: Scalable Vector Graphics
note: as a presentation attribute fill-opacity can be used as a css property. ...
... samsung internet android ? ...
...bility unknown specifications specification status comment scalable vector graphics (svg) 2the definition of 'fill-opacity' in that specification. ...

refX - SVG: Scalable Vector Graphics
the refx attribute defines the x coordinate of an element’s reference point. two elements are using this attribute: <marker> and <symbol> marker for <marker>, refx defines the x coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the shape. value <length-percentage> | <number> | left | center | right default value 0 animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox width. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of...
...er contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox width. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. left the reference point of the marker is placed at the left edge of the shape. center the reference point of the marker is placed at the horizontal center of the shape. right the reference point of the marker is placed at the right edge of the shape. symbol for <symbol>, refx defines the x coordinate of the symbol, which is defined by the cumulative effect of the x attribute and any transformations on the <symbol> and its host <use> element. unlike other positionin...
...er contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox width. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. left the reference point of the marker is placed at the left edge of the shape. center the reference point of the marker is placed at the horizontal center of the shape. right the reference point of the marker is placed at the right edge of the shape. specifications specification status comment scalable vector graphics (svg) 2the definition of 'refx' in that specification. candidate recommendation added keywords left, center, and rig...

refY - SVG: Scalable Vector Graphics
the refy attribute defines the y coordinate of an element’s reference point. two elements are using this attribute: <marker> and <symbol> marker for <marker>, refy defines the y coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the shape. value <length-percentage> | <number> | top | center | bottom default value 0 animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox height. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application o...
...ker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox height. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. top the reference point of the marker is placed at the top edge of the shape. center the reference point of the marker is placed at the vertical center of the shape. bottom the reference point of the marker is placed at the bottom edge of the shape. symbol for <symbol>, refy defines the y coordinate of the symbol, which is defined by the cumulative effect of the y attribute and any transformations on the <symbol> and its host <use> element. unlike other positionin...
...ker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox height. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. top the reference point of the marker is placed at the top edge of the shape. center the reference point of the marker is placed at the vertical center of the shape. bottom the reference point of the marker is placed at the bottom edge of the shape. specifications specification status comment scalable vector graphics (svg) 2the definition of 'refy' in that specification. candidate recommendation added keywords left, center, and rig...

stroke-dasharray - SVG: Scalable Vector Graphics
the stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape; note: as a presentation attribute, stroke-dasharray can be used as a css property. as a presentation attribute, it can be applied to any element, but it only has effect on the following twelve elements: <altglyph> <circle> <ellipse> <path> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps ...
... samsung internet android ? ...
...unknown specification specification status comment scalable vector graphics (svg) 2the definition of 'stroke-dasharray' in that specification. ...

stroke-linecap - SVG: Scalable Vector Graphics
note: as a presentation attribute stroke-linecap can be used as a css property. ...
... samsung internet android ? ...
...ity unknown specification specification status comment scalable vector graphics (svg) 2the definition of 'stroke-linecap' in that specification. ...

stroke-linejoin - SVG: Scalable Vector Graphics
note: as a presentation attribute stroke-linejoin can be used as a css property. ...
...ight" x="8" y="6" /> </svg> usage context value arcs | bevel |miter | miter-clip | round default value miter animatable yes arcs note: the arcs value as been introduced in svg2 and it isn't widely supported yet, see browser compatibility bellow for details. the arcs value indicates that an arcs corner is to be used to join path segments. the arcs shape is formed by extending the outer edges of the stroke at the join point with arcs that have the same curvature as the outer edges at the join point. example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "arcs" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" stroke-linejoin="arcs" /> ...
...troke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r="0.05" fill="pink" /> </g> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'stroke-linejoin' in that specification. candidate recommendation definition for shapes and texts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-linejoin' in that specification. recommendation initial definition for shapes and texts ...

<mask> - SVG: Scalable Vector Graphics
value type: <length> ; default value: 120%; animatable: yes maskcontentunits this attribute defines the coordinate system for the contents of the <mask>. value type: userspaceonuse|objectboundingbox ; default value: userspaceo...
...the width of the masking area. ...
... candidate rec...

<textPath> - SVG: Scalable Vector Graphics
if the path attribute is set, href has no effect. ...
... the path, it is usually wrapped in a <defs> element --> <!-- <defs> --> <path id="mypath" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <!-- </defs> --> <text> <textpath href="#mypath"> quick brown fox jumps over the lazy dog. </textpath> </text> </svg> attributes href the url to the path or basic shape on which to render the text. if the path attribute is set, href has no effect. value type: <url> ; default value: none; animatable: yes lengthadjust where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes method which method to render individual...
...y: 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-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...

Fills and Strokes - SVG: Scalable Vector Graphics
most svg you'll find around the web use inline css, but there are advantages and disadvantages associated with each type. fill and stroke attributes painting basic coloring can be done by setting two attributes on the node: fill and stroke. using fill sets the color inside the object and stroke sets the color of the line drawn around the object. you can use the same css color naming schemes that you use in html, whether that's color names (that is red), rgb values (that is rgb(255,0,0)), hex values, rgba values, etc. ...
.../> <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg> the stroke-width property defines the width of this stroke. strokes are drawn centered around the path. in the example above, the path is shown in pink, and the stroke in black. the second attribute affecting strokes is the stroke-linecap property, demonstrated above. this controls the shape of the ends of lines. there are three possible values for stroke-linecap: butt closes the line off with a straight edge that's normal (at 90 degrees) to the direction of the stroke and crosses its end. square has essentially the same appearance, but stretches the stroke slightly beyond the actual path. the distance that the stroke goes beyond the path is half the stroke-width. round produce...
...omplicated dash pattern. the first example specifies three numbers, in which case the renderer loops the numbers twice to create an even pattern. so the first path renders 5 filled, 10 empty, 5 filled, and then loops back to create 5 empty, 10 filled, 5 empty. the pattern then repeats. there are additional stroke and fill properties available, including fill-rule, which specifies how to color in shapes that overlap themselves; stroke-miterlimit, which determines if a stroke should draw miters; and stroke-dashoffset, which specifies where to start a dasharray on a line. using css in addition to setting attributes on objects, you can also use css to style fills and strokes. not all attributes can be set via css. attributes that deal with painting and filling are usually available, so fill, str...

Index - Archive of obsolete content
ipt, css, and image files. xul, xbl, javascript, and css files are all in text format and can be edited in a standard text editor, while image files are in binary gif, jpg, or png format and must be edited with an image editing program. 394 making it into a dynamic overlay and packaging it up for distribution add-ons, extensions now that we have a static overlay we're in good shape to create a xpi package that installs our extension as a dynamic overlay. xpis have a complex structure designed to separate ui layers from each other. to make our xpi we'll start out by creating a directory to hold the files we're going to add to the xpi. then we'll modify urls in our files so they point to the right place. after that we'll create a contents.rdf file describing the tinderstatus ...
...e:css-property the -ms-wrap-flow css property is a microsoft extension that specifies how exclusions impact inline content within block-level elements. 2132 -ms-wrap-margin css, css property, css:microsoft extensions, non-standard, reference, recipe:css-property the -ms-wrap-margin css property is a microsoft extension that specifies a margin that offsets the inner wrap shape from other shapes. 2133 -ms-wrap-through css, css property, css:microsoft extensions, non-standard, reference, recipe:css-property the -ms-wrap-through css property is a microsoft extension that specifies how content should wrap around an exclusion element. 2134 :-moz-full-screen-ancestor css, css:mozilla extensions, deprecated, non-standard, pseudo-class, refe...

Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
e nsiexternalhelperappservice and let it look for a helper app, put up the "what do i do now?" dialog, and so forth. ...
...alt="(12)" coords="539,133,583,163" href="#stream-converter"> <area alt="(11)" coords="485,133,537,163" href="#contenthandler"> <area alt="(9)" coords="445,132,484,165" href="#nsdocumentopeninfo::dispatchcontent"> <area alt="(8)" coords="405,133,439,162" href="#onstartrequest-innards"> <area alt="(7) onstartrequest()" coords="639,129,703,129,703,165,833,165,833,204,639,204" href="#onstartrequest" shape="poly"> <area alt="(6) asyncopen()" coords="637,121,709,121,709,96,783,96,783,58,637,58" href="#asyncopen" shape="poly"> <area alt="(5) open()" coords="311,306,432,371" href="#open"> <area alt="(4)" coords="90,384,127,417" href="#openuri-innards"> <area alt="(0) registercontentlistener()" coords="37,474,346,474,346,505,88,505,88,535,37,535" href="#registercontentlistener" shape="poly"> <area alt=...

Index - Game development
getting started working with 3d. 23 glsl shaders beginner, glsl, opengl, shader, texture shader, three.js, vertex shader shaders use glsl (opengl shading language), a special opengl shading language with syntax similar to c. glsl is executed directly by the graphics pipeline. there are two types of shaders: vertex shaders and fragment (pixel) shaders. vertex shaders transform shape positions into 3d drawing coordinates. fragment shaders compute the renderings of a shape's colors and other attributes. 25 async scripts for asm.js games, javascript, asm.js, async every medium or large game should compile asm.js code as part of an async script to give the browser the maximum flexibility to optimize the compilation process. in gecko, async compilation allows...
...ce i hope you liked the experiments — if you have any others that you think might interest other people, feel free to add details of them here. 35 tiles and tilemaps overview 2d, canvas, games, javascript, static, webgl, tilemap, tiles tilemaps are a very popular technique in 2d game development, consisting of building the game world or level map out of small, regular-shaped images called tiles. this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times. this set of articles covers the basics of creating tile maps using javascript and canvas (although the same high level techniques could be used in any programming language.) 36 ...

2D collision detection - Game development
this article provides a review of the most common techniques used to provide collision detection in 2d games. axis-aligned bounding box one of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. the algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. ...
...n () { if (rect1.x < rect2.x + rect2.w && rect1.x + rect1.w > rect2.x && rect1.y < rect2.y + rect2.h && rect1.h + rect1.y > rect2.y) { // collision detected! this.color("green"); } else { // no collision this.color("blue"); } }); note: another example without canvas or external libraries. circle collision another simple shape for collision detection is between two circles. this algorithm works by taking the centre points of the two circles and ensuring the distance between the centre points are less than the two radii added together. playable code <div id="cr-stage"></div> <p>move the circle with arrow keys. green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudf...

Explaining basic 3D theory - Game development
webgl uses the right-hand coordinate system — the x axis points to the right, the y axis points up, and the z axis points out of the screen, as seen in the above diagram. objects different types of objects are built using vertices. ...
...ba value (r, g and b for the red, green, and blue channels, alpha for transparency — all values range from 0.0 to 1.0). normal: a way to describe the direction the vertex is facing. texture: a 2d image that the vertex can use to decorate the surface it is part of instead of a simple color. you can build geometry using this information — here is an example of a cube: a face of the given shape is a plane between vertices. for example, a cube has 8 different vertices (points in space) and 6 different faces, each constructed out of 4 vertices. a normal defines which way the face is directed in. also, by connecting the points we're creating the edges of the cube. the geometry is built from a vertex and the face, while material is a texture, which uses a color or an image. if we connect th...

3D games on the Web - Game development
are all supporting webgl and all you need to focus on is optimizing the performance on the devices you use. there's an ongoing effort on releasing webgl 2.0 (based on opengl es 3.0) in the near future, which will bring many improvements and will help developers build games for the modern web using current, powerful hardware. explaining the basic 3d theory the basics of 3d theory centers around shapes represented in a 3d space, with a coordinate system being used to calculate their positions. see our explaining basic 3d theory article for all the information you need. advanced concepts you can do a lot more with webgl. there are some advanced concepts which you should dive into and learn more about — like shaders, collision detection, or the latest hot topic: virtual reality on the web. ...
...shaders, collision detection, or the latest hot topic: virtual reality on the web. shaders it's worth mentioning shaders, which are a separate story on their own. shaders use glsl, a special opengl shading language, with syntax similar to c, that is executed directly by the graphics pipeline. they can be split into vertex shaders and fragment shaders (or pixel shaders) — the former transforms shape positions to real 3d drawing coordinates, while the latter computes rendering colors and other attributes. you should definitely check out glsl shaders article to learn more about them. collision detection it's hard to imagine a game without collision detection — we always need to work out when something is hitting something else. we have information available for you to learn from: 2d col...

Create the Canvas and draw on it - Game development
circle, in radians) direction of drawing (false for clockwise, the default, or true for anti-clockwise.) this last parameter is optional. the fillstyle property looks different than before. this is because, just as with css, color can be specified as a hexadecimal value, a color keyword, the rgba() function, or any of the other available color methods. instead of using fill() and filling the shapes with colors, we can use stroke() to only colour the outer stroke. try adding this code to your javascript too: ctx.beginpath(); ctx.rect(160, 10, 100, 40); ctx.strokestyle = "rgba(0, 0, 255, 0.5)"; ctx.stroke(); ctx.closepath(); the code above prints a blue-stroked empty rectangle. thanks to the alpha channel in the rgba() function, the blue color is semi transparent. compare your code here'...
...ctx.rect(160, 10, 100, 40); ctx.strokestyle = "rgba(0, 0, 255, 0.5)"; ctx.stroke(); ctx.closepath(); the code above prints a blue-stroked empty rectangle. thanks to the alpha channel in the rgba() function, the blue color is semi transparent. compare your code here's the full source code of the first lesson, running live in a jsfiddle: exercise: try changing the size and color of the given shapes. next steps now we've set up the basic html and learned a bit about canvas, lets continue to the second chapter and work out how to move the ball in our game. « previousnext » ...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
are to be serialized as part of a css property value. it is defined by the formal syntax of the property and normally refers to the order in which longhand values should be specified as part of a single shorthand value. 65 canvas codingscripting, glossary, graphics, html, javascript the canvas element is part of html5 and allows for dynamic, scriptable rendering of 2d and 3d shapes and bitmap images. 66 card sorting card sorting, design, glossary card sorting is a simple technique used in information architecture whereby people involved in the design of a website (or other type of product) are invited to write down the content / services / features they feel the product should contain, and then organize those features into categories or groupings. this...
...y, lazy loading, reference, web performance lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation pattern; typically, these assets are only loaded when they are scrolled into view. 250 ligature css, design, glossary a ligature is a joining of two characters into one shape. for example, in french "œ" is a ligature of "oe". 251 local scope codingscripting, glossary, needscontent local scope is a characteristic of variables that makes them local (i.e., the variable name is only bound to its value within a scope which is not the global scope). 252 local variable codingscripting, glossary, needscontent a variable whose name is...

Debugging CSS - Learn web development
wser, it is worth knowing how to access them in other browsers. this will help if you are seeing different rendering between multiple browsers. you will also find that browsers have chosen to focus on different areas when creating their devtools. for example in firefox there are some excellent tools for working visually with css layout, allowing you to inspect and edit grid layouts, flexbox, and shapes. however, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor. in this lesson we will look at some useful features of the firefox devtools for working with css. in order to do so i'll be using an example file. load this up in a new tab if you want to follow along,...
... in some way. in the screenshot below the browser does not support the subgrid value of grid-template-columns. you can also take a look at the browser compatibility tables at the bottom of each property page on mdn. these show you browser support for that property, often broken down if there is support for some usage of the property and not others. the below table shows the compat data for the shape-outside property. no compatibility data found. please contribute data for "css.shape-outside" (depth: 1) to the mdn compatibility data repository. is something else overriding your css? this is where the information you have learned about specificity will come in very useful. if you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of...

Add a hitmap on top of an image - Learn web development
same map name as you used in your usemap attribute above: <map name="example-map-1"> </map> inside the <map> element, we need <area> elements. an <area> element corresponds to a single hotspot. to keep keyboard navigation intuitive, make sure the source order of <area> elements corresponds to the visual order of hotspots. <area> elements are empty elements, but do require four attributes: shape coords shape takes one of four values: circle, rect, poly, and default. (a default <area> occupies the entire image, minus any other hotspots you’ve defined.) the shape you choose determines the coordinate information you’ll need to provide in coords. for a circle, provide the center's x and y coordinates, followed by the length of the radius. for a rectangle, provide the x/y coord...
...k anywhere (say, if you’re making a hollow circle.) alt a mandatory attribute, telling people where the link goes or what it does. alt text only displays when the image is unavailable. please refer to our guidelines for writing accessible link text. you may write alt="" if the href attribute is blank and the entire image already has an alt attribute. <map name="example-map-1"> <area shape="circle" coords="200,250,25" href="page-2.html" alt="circle example" /> <area shape="rect" coords="10, 5, 20, 15" href="page-3.html" alt="rectangle example" /> </map> step 3: make sure it works for everybody you aren’t done until you test image maps rigorously on many browsers and devices. try following links with your keyboard alone. try turning images off. if your image map is...

Index - Learn web development
ts more. 104 a cool-looking box assessment, beginner, css, learn, backgrounds, borders, box, box model, effects in this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box. 105 advanced styling effects article, beginner, blend modes, boxes, css, codingscripting, filters, styling, box shadows, effects, shapes we hope this article was fun — playing with shiny toys generally is, and it is always interesting to see what kinds of advanced styling tools are becoming available in modern browsers. 106 backgrounds and borders background, beginner, css, image, learn, position, borders, color we have covered quite a lot here, and you can see that there is quite a lot to adding a ba...
...ide a todoitem in our app. 294 routing in ember beginner, ember, frameworks, javascript, learn, routing, client-side congratulations! you've finished this tutorial! 295 starting our svelte todo list app beginner, components, frameworks, javascript, learn, svelte, client-side, state with our markup and styling in place our todo list app is starting to take shape, and we have everything ready so that we can start to focus on the features we have to implement. 296 styling vue components with css beginner, css, frameworks, javascript, learn, styling, client-side, vue our work is done on the styling of our sample app. in the next article we'll return to adding some more functionlity to our app, namely using a computed property to add a c...

Object building practice - Learn web development
= canvas.getcontext('2d'); const width = canvas.width = window.innerwidth; const height = canvas.height = window.innerheight; this script gets a reference to the <canvas> element, then calls the getcontext() method on it to give us a context on which we can start to draw. the resulting constant (ctx) is the object that directly represents the drawing area of the canvas and allows us to draw 2d shapes on it. next, we set constants called width and height, and the width and height of the canvas element (represented by the canvas.width and canvas.height properties) to equal the width and height of the browser viewport (the area that the webpage appears on — this can be gotten from the window.innerwidth and window.innerheight properties). note that we are chaining multiple assignments togeth...
...lstyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * math.pi); ctx.fill(); } using this function, we can tell the ball to draw itself onto the screen, by calling a series of members of the 2d canvas context we defined earlier (ctx). the context is like the paper, and now we want to command our pen to draw something on it: first, we use beginpath() to state that we want to draw a shape on the paper. next, we use fillstyle to define what color we want the shape to be — we set it to our ball's color property. next, we use the arc() method to trace an arc shape on the paper. its parameters are: the x and y position of the arc's center — we are specifying the ball's x and y properties. the radius of the arc — in this case, the ball's size property. the last two ...

Shell global objects
r() retrieve the sharedarraybuffer object from the cross-worker mailbox. the object retrieved may not be identical to the object that was installed, but it references the same shared memory. getsharedarraybuffer performs an ordering memory barrier. setsharedarraybuffer() install the sharedarraybuffer object in the cross-worker mailbox. setsharedarraybuffer performs an ordering memory barrier. shapeof(obj) get the shape of obj (an implementation detail). groupof(obj) get the group of obj (an implementation detail). unwrappedobjectshavesameshape(obj1, obj2) returns true iff obj1 and obj2 have the same shape, false otherwise. both objects are unwrapped first, so this can be used on objects from different globals. sleep(dt) sleep for dt seconds. compile(code) compiles a string to bytec...
...start to target, or undefined if target is unreachable from start. each element of the array is either of the form: { node: {object or string}, edge: {string describing edge from node} } , if the node is a javascript object or value; or of the form: { type: {string describing node}, edge: {string describing edge} } , if the node is some internal thing that is not a proper javascript value (like a shape or a scope chain element). the destination of the i'th array element's edge is the node of the i+1'th array element; the destination of the last array element is implicitly target. shortestpaths(start, targets, maxnumpaths) return an array of arrays of shortest retaining paths. there is an array of shortest retaining paths for each object in targets. the maximum number of paths in each of those...

Work with animations - Firefox Developer Tools
on 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 more about the cost of animating different css properties). the bar is shaped to reflect the easing effect used for the animation. in the example above you can see that the first bar is concave, representing ease-in, and the second is convex, representing ease-out. if the animation used css transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. if the animation used css @keyframes, there is one ba...
...ring over these selectors, we can see that those elements are, respectively, the browser name "firefox developer edition" and the browser icon. the img#icon animation: animated the filter and transform properties, to scale the icon and color it lasted 750ms, had an enddelay of 100ms used the compositor thread was given an easing value of ease-in: you can see this by the concave shape of the green bar. the span#note animation: animated the width and opacity properties, to make the name gradually appear lasted 500ms, and had a delay of 150ms was given an easing value of ease-out: you can see this by the convex shape of the green bar. animation playback at the top of the animation inspector: there are buttons to play/pause and restart the animation...

CanvasRenderingContext2D.clip() - Web APIs
the canvasrenderingcontext2d.clip() method of the canvas 2d api turns the current or given path into the current clipping region. it replaces any previous clipping region. in the image below, the red outline represents a clipping region shaped like a star. only those parts of the checkerboard pattern that are within the clipping region get drawn. note: be aware that the clipping region is only constructed from shapes added to the path. it doesn't work with shape primitives drawn directly to the canvas, such as fillrect(). instead, you'd have to use rect() to add a rectangular shape to the path before calling clip(). syntax void ctx.clip([fillrule]); void ctx.clip(path [, fillrule]); parameters fillrule the algorithm by which to determine if a point is inside or outside the clippi...
...arameters fillrule the algorithm by which to determine if a point is inside or outside the clipping region. possible values: "nonzero": the non-zero winding rule. default rule. "evenodd": the even-odd winding rule. path a path2d path to use as the clipping region. examples a simple clipping region this example uses the clip() method to create a clipping region according to the shape of a circular arc. two rectangles are then drawn; only those parts within the clipping region are rendered. html <canvas id="canvas"></canvas> javascript the clipping region is a full circle, with its center at (100, 75), and a radius of 50. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(100...

CanvasRenderingContext2D.globalAlpha - Web APIs
the canvasrenderingcontext2d.globalalpha property of the canvas 2d api specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas. see also the chapter applying styles and color in the canvas tutorial. syntax ctx.globalalpha = value; options value a number between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive. the default value is 1.0. values outside that range, including infinity and nan, will not be set, and globalalpha will retain its previous value. examples drawing translucent shapes this example uses the globalalpha property to draw two semi-transparent rectangles. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx...
...apes this example uses the globalalpha property to draw two semi-transparent rectangles. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalalpha = 0.5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other. we begin by drawing a solid background composed of four differently colored squares. next, we set the globalalpha property to 0.2 (20% opaque); this alpha level will apply to all of our transparent shapes. after that, we use a for loop to draw a series of circles with increasing radii. with each...

CanvasRenderingContext2D.scale() - Web APIs
the canvasrenderingcontext2d.scale() method of the canvas 2d api adds a scaling transformation to the canvas units horizontally and/or vertically. by default, one unit on the canvas is exactly one pixel. a scaling transformation modifies this behavior. for instance, a scaling factor of 0.5 results in a unit size of 0.5 pixels; shapes are thus drawn at half the normal size. similarly, a scaling factor of 2.0 increases the unit size so that one unit becomes two pixels; shapes are thus drawn at twice the normal size. syntax void ctx.scale(x, y); parameters x scaling factor in the horizontal direction. a negative value flips pixels across the vertical axis. a value of 1 results in no horizontal scaling. y scaling factor in the vertical direction. a negative value flips pixels across the...
...drawn at twice the normal size. syntax void ctx.scale(x, y); parameters x scaling factor in the horizontal direction. a negative value flips pixels across the vertical axis. a value of 1 results in no horizontal scaling. y scaling factor in the vertical direction. a negative value flips pixels across the horizontal axis. a value of 1 results in no vertical scaling. examples scaling a shape this example draws a scaled rectangle. a non-scaled rectangle is then drawn for comparison. html <canvas id="canvas"></canvas> javascript the rectangle has a specified width of 8 and a height of 20. the transformation matrix scales it by 9x horizontally and by 3x vertically. thus, its final size is a width of 72 and a height of 60. notice that its position on the canvas also changes. since...

CanvasRenderingContext2D.shadowColor - Web APIs
g, and of the strokestyle color when stroking. note: shadows are only drawn if the shadowcolor property is set to a non-transparent value. one of the shadowblur, shadowoffsetx, or shadowoffsety properties must be non-zero, as well. syntax ctx.shadowcolor = color; color a domstring parsed as a css <color> value. the default value is fully-transparent black. examples adding a shadow to shapes this example adds a shadow to two squares; the first one is filled, and the second one is stroked. the shadowcolor property sets the shadows' color, while shadowoffsetx and shadowoffsety set their position relative to the shapes. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = ...
...this example strokes and fills a rectangle with translucent colors. html <canvas id="canvas"></canvas> javascript the resulting alpha value of the fill shadow is .8 * .2, or .16. the alpha of the stroke shadow is .8 * .6, or .48. ...

Basic animations - Web APIs
« previousnext » since we're using javascript to control <canvas> elements, it's also very easy to make (interactive) animations. in this chapter we will take a look at how to do some basic animations. probably the biggest limitation is, that once a shape gets drawn, it stays that way. if we need to move it we have to redraw it and everything that was drawn before it. it takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on. basic animation steps these are the steps you need to take to draw a frame: clear the canvas unless the shapes you'll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously. the easiest way to do this i...
...a backdrop image), you need to clear any shapes that have been drawn previously. the easiest way to do this is using the clearrect() method. save the canvas state if you're changing any setting (such as styles, transformations, etc.) which affect the canvas state and you want to make sure the original state is used each time a frame is drawn, you need to save that original state. draw animated shapes the step where you do the actual frame rendering. restore the canvas state if you've saved the state, restore it before drawing a new frame. controlling an animation shapes are drawn to the canvas by using the canvas methods directly or by calling custom functions. in normal circumstances, we only see these results appear on the canvas when the script finishes executing. for instance, it i...

Transformations - Web APIs
ranslate 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. this can be used to draw scaled down or enlarged shapes and bitmaps. scale(x, y) scales the canvas units by x horizontally and by y vertically. both parameters are real numbers. values that are smaller than 1.0 reduce the unit size and values above 1.0 increase the unit size. values of 1.0 leave the units the same size. using negative numbers you can do axis mirroring (for example using translate(0,canvas.height); scale(1,-1); you will have the...
...e the units the same size. using negative numbers you can do axis mirroring (for example using translate(0,canvas.height); scale(1,-1); you will have the well-known cartesian coordinate system, with the origin in the bottom left corner). by default, one unit on the canvas is exactly one pixel. if we apply, for instance, a scaling factor of 0.5, the resulting unit would become 0.5 pixels and so shapes would be drawn at half size. in a similar way setting the scaling factor to 2.0 would increase the unit size and one unit now becomes two pixels. this results in shapes being drawn twice as large. a scale example in this last example, we'll draw shapes with different scaling factors. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw a simple rectangl...

HTMLAnchorElement - Web APIs
name. htmlanchorelement.rev is a domstring representing that the rev html attribute, specifying the relationship of the link object to the target object. note: currently the w3c html 5.2 spec states that rev is no longer obsolete, whereas the whatwg living standard still has it labeled obsolete. until this discrepancy is resolved, you should still assume it is obsolete. htmlanchorelement.shape is a domstring representing the shape of the active area. methods inherits methods from its parent, htmlelement, and implements those from htmlhyperlinkelementutils. htmlelement.blur() removes the keyboard focus from the current element. htmlelement.focus() gives the keyboard focus to the current element. htmlhyperlinkelementutils.tostring() returns a usvstring containing the whole ...
...and hash, have been moved to the htmlhyperlinkelementutils mixin, and htmlanchorelement implements this mixin. html5the definition of 'htmlanchorelement' in that specification. recommendation the methods blur() and focus(), as well as the properties tabindex and accesskey, are now defined on htmlelement. the following properties are now obsolete: charset, coords, name, rev, and shape. the following properties have been added: hash, host, hostname, media, pathname, port, protocol, rellist, search, and text. document object model (dom) level 2 html specificationthe definition of 'htmlanchorelement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 specificationthe def...

HTMLImageElement.alt - Web APIs
neque libero. vivamus consectetur rhoncus elit eget porta. etiam pulvinar ex id sapien laoreet, quis aliquet odio lobortis. nam ac mauris at risus laoreet cursus vitae et sapien. etiam molestie auctor eros, ac porta risus scelerisque sit amet. ut nunc neque, porta eu auctor at, tempor et arcu. ...
...porta eu auctor at, tempor et arcu. </p> </div> css the main feature of the css here is the use of clip-path and shape-outside to wrap the text around the icon in an appealing way. .container { max-width: 500px; } .pageinfo-badge { width: 9em; padding-right: 1em; float: left; clip-path: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0); shape-outside: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0); } .contents { margin-top: 1em; font: 16px arial,helvetica,verdana,sans-serif; } result other images images simply showing objects or scenes should have alt text describing what's seen in the image. a photo of a yellow teapot might literally have its alt attribute set to "a yellow teapot". ...

HTMLImageElement.useMap - Web APIs
you can learn more about client-side image maps in our learning article add a hitmap on top of an image. usage notes the string value of usemap must be a valid anchor for a <map> element. in other words, this string should be the value of the appropriate <map>'s name attribute with a pound or hash symbol prepended to it. ...
...f an image. usage notes the string value of usemap must be a valid anchor for a <map> element. in other words, this string should be the value of the appropriate <map>'s name attribute with a pound or hash symbol prepended to it. consider a <map> that looks like this: <map name="mainmenu-map"> <area shape="circle" coords="25, 25, 75, 75" href="/index.html" alt="return to home page"> <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="shop"> </map> given the image map named mainmenu-map, the image which uses it should look something like the following: <img src="menubox.png" usemap="#mainmenu-map"> for additional examples (including interactive ones), see the articles about the <map> and <area> elements, as well as the guide to using image maps. example the sourc...

OscillatorNode.setPeriodicWave() - Web APIs
returns undefined example the following example illustrates simple usage of createperiodicwave(), recreating a sine wave from a periodic wave. ...
... returns undefined example the following example illustrates simple usage of createperiodicwave(), recreating a sine wave from a periodic wave. ...

OscillatorNode.type - Web APIs
the different available values are: sine a sine wave. this is the default value. square a square wave with a duty cycle of 0.5; that is, the signal is "high" for half of each period. sawtooth a sawtooth wave. triangle a triangle wave. custom a custom waveform. ...
...the different available values are: sine a sine wave. this is the default value. square a square wave with a duty cycle of 0.5; that is, the signal is "high" for half of each period. sawtooth a sawtooth wave. triangle a triangle wave. custom a custom waveform. ...

SVGGeometryElement - Web APIs
the svggeometryelement interface represents svg elements whose rendering is defined by geometry with an equivalent path, and which can be filled and stroked. this includes paths and the basic shapes. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mi...
...g 2 they were moved to this interface. properties this interface also inherits properties from its parent, svggraphicselement. svggeometryelement.pathlength read only this property reflects the pathlength attribute. methods this interface also inherits methods from its parent, svggraphicselement. svggeometryelement.ispointinfill() determines whether a given point is within the fill shape of an element. normal hit testing rules apply; the value of the pointer-events property on the element determines whether a point is considered to be within the fill. svggeometryelement.ispointinstroke() determines whether a given point is within the stroke shape of an element. normal hit testing rules apply; the value of the pointer-events property on the element determines whether a point is ...

WebGLRenderingContext.enableVertexAttribArray() - Web APIs
xattribpointer(avertexposition, vertexnumcomponents, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, vertexcount); 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. this code sets the buffer of vertexes that will be used to draw the triangles of the shape by calling bindbuffer(). then the vertex position attribute's index is obtained from the shader program by calling getattriblocation(). with the index of the vertex position attribute now available in avertexposition, we call enablevertexattribarray() to enable the position attribute so it can be used by the shader program (in particular, by the vertex shader). then the vertex buffer is bound t...
...e so it can be used by the shader program (in particular, by the vertex shader). then the vertex buffer is bound to the avertexposition attribute by calling vertexattribpointer(). this step is not obvious, since this binding is almost a side effect. but as a result, accessing avertexposition now obtains data from the vertex buffer. with the association in place between the vertex buffer for our shape and the avertexposition attribute used to deliver vertexes one by one into the vertex shader, we're ready to draw the shape by calling drawarrays(). specifications specification status comment webgl 1.0the definition of 'enablevertexattribarray' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glenablevertexattribar...

Using bounded reference spaces - Web APIs
a set of 12 points representing the vertices of the available physical space. there are two cut-out areas in the room, possibly representing a couch, sofa, or bench behind the user and a stand or table on which the computer or other hardware is located. as this suggests, the safe area is not required to be convex, but may have any number of indentations or extrusions, as long as it's a contiguous shape, note that the coordinates of the origin here, (0, 0), are indicative of the fact that the boundaries are defined at floor level and are essentially a 2d shape on the floor, like an invisible fence used to keep pets from getting away from home. the full coordinates here would be (0, 0, 0). this boundary is maintained in the xrboundedreferencespace in the the xrboundedreferencespace property bou...
...und the room in clockwise order. each vertex in the array has a y coordinate of 0 since the entire boundary is defined at floor level, extending upward to the ceiling or indefinitely. each point's w is always 1 as well. the interior of the bounded area is always considered to be on the right side of the boundary. by listing the points in clockwise order, the boundary is placed inside the defined shape. if the points are listed counterclockwise it would suggest that the safe area lies outside the boundary, probably with undesirable results. you should consider including proactive checks for the user approaching the boundary. this is useful both for their safety (in case the boundary represents a physical obstacle of some nature) and to avoid possible conditions in which the accuracy is reduced...

Web Audio API - Web APIs
ou might want to consult some beginner's javascript tutorials first and then come back here — see our beginner's javascript learning module for a great place to begin. web audio api interfaces the web audio api has a number of interfaces and associated events, which we have split up into nine categories of functionality. general audio graph definition general containers and definitions that shape audio graphs in web audio api usage. audiocontext the audiocontext interface represents an audio-processing graph built from audio modules linked together, each represented by an audionode. an audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. you need to create an audiocontext before you do anything else, as everything happens...
...t, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once. gainnode the gainnode interface represents a change in volume. it is an audionode audio-processing module that causes a given gain to be applied to the input data before its propagation to the output. waveshapernode the waveshapernode interface represents a non-linear distorter. it is an audionode that use a curve to apply a waveshaping distortion to the signal. beside obvious distortion effects, it is often used to add a warm feeling to the signal. periodicwave describes a periodic waveform that can be used to shape the output of an oscillatornode. iirfilternode implements a general infinite impul...

-webkit-box-reflect - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

additive-symbols - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

negative - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

pad - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

prefix - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

suffix - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

symbols - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
redefine our layout for the circumstance of having enough screen real estate to show two columns. @media (min-width: 500px) { .wrapper { grid-template-columns: 1fr 3fr; grid-template-areas: "header header" "nav nav" "sidebar content" "ad footer"; } nav ul { display: flex; justify-content: space-between; } } you can see the layout taking shape in the value of grid-template-areas. the header spans over two column tracks, as does the nav. in the third row track we have the sidebar alongside the content. in the fourth row track i have chosen to place my ad content – so it appears under the sidebar, then the footer next to it under the content. i’m using a flexbox on the navigation to display it in a row spaced out. i can now add a fi...
...tent { grid-column: col-start 3 / span 8; grid-row: 2 / 4; } .side { grid-column: col-start 11 / span 2; grid-row: 2; } .ad { grid-column: col-start 11 / span 2; grid-row: 3; } .main-footer { grid-column: col-start / span 12; } nav ul { flex-direction: column; } } once again the grid inspector is useful to help us see how our layout has taken shape. something to note as we create this layout is that we haven’t needed to explicitly position every element on the grid at each breakpoint. we have been able to inherit the placement set up for earlier breakpoints – an advantage of working “mobile first”. we are also able to take advantage of grid auto-placement. by keeping elements in a logical order, auto-placement does quite a lot of...

CSS reference - CSS: Cascading Style Sheets
mation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom...
...artscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescrollbar-colorscrollbar-width::selectionselector()sepia()<shape>shape-image-thresholdshape-marginshape-outsidesize (@page)skew()skewx()skewy()::slottedspeak-as (@counter-style)src (@font-face)steps()<string>@stylesetstyleset()@stylisticstylistic()suffix (@counter-style)@supports@swashswash()symbols (@counter-style)symbols()system (@counter-style)ttab-sizetable-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-upr...

WebKit CSS extensions - CSS: Cascading Style Sheets
ustify-content -webkit-justify-items -webkit-justify-self -webkit-line-break m -webkit-mask -webkit-mask-clip -webkit-mask-composite -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-repeat -webkit-mask-size o-r -webkit-opacity -webkit-order -webkit-perspective -webkit-perspective-origin -webkit-ruby-position s -webkit-scroll-snap-type -webkit-shape-image-threshold -webkit-shape-margin -webkit-shape-outside t -epub-text-decoration -webkit-text-color-decoration -webkit-text-decoration-line -webkit-text-decoration-style -epub-text-emphasis -webkit-text-emphasis -epub-text-emphasis-color -webkit-text-emphasis-color -webkit-text-emphasis-position -epub-text-emphasis-style -webkit-text-emphasis-style -webkit-text-justify -webki...
... pseudo-classes :-webkit-animating-full-screen-transition :-webkit-any() :-webkit-any-link* :-webkit-autofill :-webkit-autofill-strong-password :-webkit-drag :-webkit-full-pa...

background-image - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

background - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

border-image-source - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

cross-fade() - CSS: Cascading Style Sheets
re <image-tags> = ltr | rtl<image-src> = <url> | <string><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )<alpha-value> = <number> | <percentage><hue> = <number> | <angle>where <side-or-corner> = [ left | right ] | [ top |...
...ent( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )<alpha-value> = <number> | <percentage><hue> = <number> | <angle>where <side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

mask-border-source - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

mask-clip - CSS: Cascading Style Sheets
eyword behaves the same as content-box. text this keyword clips the mask image to the text of the element. ...
... keyword clips the mask image to the text of the element. ...

mask-image - CSS: Cascading Style Sheets
<image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percen...
...l( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-s...

mask-origin - CSS: Cascading Style Sheets
of the viewbox attribute. content same as content-box. padding same as padding-box. border same as border-box. ...
...nt-box. padding same as padding-box. border same as border-box. ...

offset - CSS: Cascading Style Sheets
[ / <'offset-anchor'> ]? examples animating an element along a path html <div id="offsetelement"></div> css @keyframes ...
...[ / <'offset-anchor'> ]? examples animating an element along a path html <div id="offsetelement"></div> css @keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; } } #offsetelement { width: 50px; heig...

paint-order - CSS: Cascading Style Sheets
syntax /* normal */ paint-order: normal; /* single values */ paint-order: stroke; /* draw the stroke first, then fill and markers */ paint-order: markers; /* draw the markers first, then fill and stroke */ /* multiple values */ paint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */ paint-order: markers stroke fill; /* draw markers, then stroke, then fill */ if no value is specified, the default paint order is fill, stroke, markers. ...
...is specified, the default paint order is fill, stroke, markers. when one value is specified, that one is painted first, followed by the other two in their default order relative to one another. when two values are specified, they will be painted in the order they are specified in, followed by the unspecified one. note: in the case of this property, markers are only appropriate when drawing svg shapes involving the use of the marker-* properties (e.g. marker-start) and <marker> element. they do not apply to html text, so in that case, you can only determine the order of stroke and fill. values normal paint the different items in normal paint order. stroke, fill, markers specify some or all of these values in the order you want them to be painted in. formal definition initial valu...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
side of the border. other ways to use color css isn't the only web technology that supports color. there are graphics technologies that are available on the web which also support color. the html canvas api lets you draw 2d bitmapped graphics in a <canvas> element. see our canvas tutorial to learn more. svg (scalable vector graphics) lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. svg commands are formatted as xml, and can be embedded directly into a web page or can be placed in he page using the <img> element, just like any other type of image. webgl the web graphics library is an opengl es-based api for drawing high-performance 2d and 3d graphics on the web. see our webgl tutorial to find out more. how to describe a color i...
... blindness, which causes people to be unable to differentiate between the colors red and green. there are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all. the most important rule: never use color as the only way to know something. if, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. instead, perhaps use both text and color together, so that everyone can understand what's happening. for more information about color blindness, see the following articles: medline plus: color blindness (united states national institute of health) american acade...

<a>: The Anchor element - HTML: Hypertext Markup Language
avior as setting rel="noopener". type hints at the linked url’s format with a mime type. no built-in functionality. obsolete attributes charsetobsolete since html5 hinted at the character encoding of the linked url. note: this attribute is obsolete and should not be used by authors. use the http content-type header on the linked url. coordsobsolete since html5 used with the shape attribute. a comma-separated list of coordinates. nameobsolete since html5 was required to define a possible target location in a page. in html 4.01, id and name could both be used on <a>, as long as they had identical values. note: use the global attribute id instead. revobsolete since html5 specified a reverse link; the opposite of the rel attribute. deprecated for being very confusi...
...ibute. a comma-separated list of coordinates. nameobsolete since html5 was required to define a possible target location in a page. in html 4.01, id and name could both be used on <a>, as long as they had identical values. note: use the global attribute id instead. revobsolete since html5 specified a reverse link; the opposite of the rel attribute. deprecated for being very confusing. shapeobsolete since html5 the shape of the hyperlink’s region in an image map. note: use the <area> element for image maps instead. properties content categories flow content, phrasing content, interactive content, palpable content. permitted content transparent, containing either flow content (excluding interactive content) or phrasing content. tag omission ...

<map> - HTML: Hypertext Markup Language
e so that it can be referenced. the attribute must be present and must have a non-empty value with no space characters. the value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another <map> element in the same document. if the id attribute is also specified, both attributes must have the same value. ...
...nt and must have a non-empty value with no space characters. the value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another <map> element in the same document. if the id attribute is also specified, both attributes must have the same value. ...

Image file type and format guide - Web media technologies
sion lossless, optionally indexed color like gif licensing ©2003 w3c® (mit, ercim, keio), all rights reserved. w3c liability, trademark, document use and software licensing rules apply. no known royalty-bearing patents. svg (scalable vector graphics) svg is an xml-based vector graphics format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth. svg files are ideal for diagrams, icons, and other images which can be accurately drawn at any size. as such, svg is popular for user interface elements in modern web design. svg files are text files containing source code that, when interpreted, draws the desired image. for instance, this example defines an drawing area with initial size 100 by 100 ...
...on artifacts aren't a concern png or jpeg; gif for screenshots with low color counts diagrams, drawings, and charts for any image that can be represented using vector graphics, svg is the best choice. otherwise, you should use a lossless format like png. if you do choose a lossy format, such as jpeg or lossy webp, carefully weigh the compression level to avoid causing text or other shapes to become fuzzy or unclear. best choice fallback svg png providing image fallbacks while the standard html <img> element doesn't support compatibility fallbacks for images, the <picture> element does. <picture> is used as a wrapper for a number of <source> elements, each specifying a version of the image in a different format or under different media conditions, ...

clip-rule - SVG: Scalable Vector Graphics
ip-rule attribute only applies to graphics elements that are contained within a <clippath> element. the clip-rule attribute basically works as the fill-rule attribute, except that it applies to <clippath> definitions. ...
...cified on the <path> element that defines the clipping shape: <g> <clippath id="myclip"> <path d="..." clip-rule="evenodd" /> </clippath> <rect clip-path="url(#myclip)" ... /> </g> whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the clip-rule is specified on the referencing element, not on the object defining the clipping shape: <g> <clippath id="myclip"> <path d="..." /> </clippath> <rect clip-path="url(#myclip)" clip-rule="evenodd" ... /> </g> as a presentation attribute, it also can be used as a property directly inside a css stylesheet usage context categories presentation attribute value nonzero | evenodd | inherit animatable yes normative docume...

href - SVG: Scalable Vector Graphics
eight="100" width="100"/> </svg> lineargradient for <lineargradient>, href defines url referring to a template gradient element; to be valid, the reference must be to a different <lineargradient> or <radialgradient> element. value <url> default value none animatable yes mpath for <mpath>, href defines a url referring to the <path> element or basic shape which defines the motion path. value <url> default value none animatable no pattern for <pattern>, href defines a url referring to a different <pattern> element within the current svg document. any attributes which are defined on the referenced element which are not defined on this element are inherited by this element. if this element has no children,...
...t> or <radialgradient> element. value <url> default value none animatable yes script for <script>, href defines a url referring to an external resource containing the script code. value <url> default value none animatable no textpath for <textpath>, href defines a url referring to the <path> element or basic shape onto which the text will be rendered if no path attribute is provided. on the <textpath> element, the href attribute is animatable. value <url> default value none animatable yes use for <use>, href defines a url referring to an element or fragment within an svg document to be cloned. the <use> element can reference an entire svg document by specifying...

in - SVG: Scalable Vector Graphics
esents an image snapshot of the svg document under the filter region at the time that the <filter> element was invoked. backgroundalpha same as backgroundimage except only the alpha channel is used. fillpaint this keyword represents the value of the fill property on the target element for the filter effect. ...
... <filter-primitive-reference> this value is an assigned name for the filter primitive in the form of a <custom-ident>. ...

orient - SVG: Scalable Vector Graphics
the orient attribute indicates how a marker is rotated when it is placed at its position on the shape. only one element is using this attribute: <marker> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="-65deg"> <path d="m 0 0 l 10 5 l 0 10 z" fill="red" /> </marker> </defs> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <po...
...ientation that would be used if auto where specified. for all other markers, auto-start-reverse means the same as auto. note: this allows a single arrowhead marker to be defined that can be used for both the start and end of a path, i.e. which points outwards from both ends. <angle> this value indicates that the marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis. note: for example, if a value of 45 is given, then the marker's positive x-axis would be pointing down and right in the shape's coordinate system. <number> this value indicates an angle in degrees. the marker is oriented such that the specified angle is that measured between the shape's positive x-axis and the marker's positive x-axis. s...

stroke-dashoffset - SVG: Scalable Vector Graphics
samsung internet android ? ...
...known specification specification status comment scalable vector graphics (svg) 2the definition of 'stroke-dashoffset' in that specification. ...

stroke-miterlimit - SVG: Scalable Vector Graphics
samsung internet android ? ...
...known specification specification status comment scalable vector graphics (svg) 2the definition of 'stroke-miterlimit' in that specification. ...

stroke - SVG: Scalable Vector Graphics
the stroke attribute is a presentation attribute defining the color (or any svg paint servers like gradients or patterns) used to paint the outline of the shape; note: as a presentation attribute stroke can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- simple color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- stroke a circle with a gradient --> <defs> <lineargradient id="mygradient"> <stop offset="0%" stop-color="gre...
... <circle cx="15" cy="5" r="4" fill="none" stroke="url(#mygradient)" /> </svg> usage notes value <paint> default value none animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'stroke' in that specification. candidate recommendation definition for shapes and texts. adds context-fill and context-stroke. scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke' in that specification. recommendation initial definition for shapes and texts browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github...

x1 - SVG: Scalable Vector Graphics
the gradient stop values. ...
... can...

x2 - SVG: Scalable Vector Graphics
the gradient stop values. ...
... can...

SVG Attribute reference - SVG: Scalable Vector Graphics
s 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 t tabindex...
...lay, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-mode filters attributes filter primitive attributes height, result, width, x, y transfer func...

<animateColor> - SVG: Scalable Vector Graphics
this element has been deprecated in svg 1.1 second edition and may be removed in a future version of svg. it provides no features not already available by using the <animate> element. so, authors should use the <animate> element instead. the <animatecolor> svg element specifies a color transformation over time. ...
... this element has been deprecated in svg 1.1 second edition and may be removed in a future version of svg. it provides no features not already available by using the <animate> element. so, authors should use the <animate> element instead. the <animatecolor> svg element specifies a color transformation over time. ...

<g> - SVG: Scalable Vector Graphics
y: 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-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... candidate ...

<linearGradient> - SVG: Scalable Vector Graphics
n to the gradient coordinate system. value type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template. value type: <url> ; default value: none; animatable: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient. value type: pad|reflect|repeat ; default value: pad; animatable: yes x1 this attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. value type: <length> ; default value: 0%; animatable: yes x2 this attribute defines the x coordinate of the ending point of the vector gradient along which the linear gr...
...; default value: 0%; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specif...

<radialGradient> - SVG: Scalable Vector Graphics
ype: <url> ; default value: none; animatable: yes r this attribute defines the radius of the end circle of the radial gradient. the gradient will be drawn such that the 100% <stop> is mapped to the perimeter of the end circle. value type: <length> ; default value: 50%; animatable: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient. value type: pad|reflect|repeat ; default value: pad; animatable: yes xlink:href an <iri> reference to another <lineargradient> element that will be used as a template. value type: <iri> ; default value: none; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document ...
...default value: none; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specif...

<svg> - SVG: Scalable Vector Graphics
processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
... candidat...

<symbol> - SVG: Scalable Vector Graphics
ble: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...
...only instances of a <symbol> element (i.e., a reference to a <symbol> by a <use> element) are rendered. ...

SVG element reference - SVG: Scalable Vector Graphics
> <mpath> p <path> <pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solidcolor> <stop> <style> <svg> <switch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, <mpath>, <set> basic shapes <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect> container elements <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown> descriptive elements <desc>, <metadata>, <title> filter primitive elements <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropsh...
...nt>, <metadata>, <pattern>, <radialgradient>, <script>, <style>, <symbol>, <title> paint server elements <hatch>, <lineargradient>, <meshgradient>, <pattern>, <radialgradient>, <solidcolor> renderable elements <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <unknown>, <use> shape elements <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> structural elements <defs>, <g>, <svg>, <symbol>, <use> text content elements <altglyph>, <altglyphdef>, <altglyphitem>, <glyph>, <glyphref>, <textpath>, <text>, <tref>, <tspan> text content child elements <altglyph>, <textpath>, <tref>, <tspan> uncategorized elements <clippath>, <color-profile>, <cursor>...

Introduction - SVG: Scalable Vector Graphics
the image and its components can also be transformed, composited together, or filtered to change their appearance completely. svg came about in 1999 after several competing formats had been submitted to the w3c and failed to be fully ratified. ...
...and not requiring third-party extensions. whether or not to use it often depends on your specific use case. basic ingredients html provides elements for defining headers, paragraphs, tables, and so on. in much the same way svg provides elements for circles, rectangles, and simple and complex curves. a simple svg document consists of nothing more than the <svg> root element and several basic shapes that build a graphic together. in addition there is the <g> element, which is used to group several basic shapes together. starting from there, the svg image can become arbitrarily complex. svg supports gradients, rotations, filter effects, animations, interactivity with javascript, and so on. but all these extra features of the language rely on this relatively small set of elements to define t...

Canvas code snippets - Archive of obsolete content
i = 0; i < all; i += 4) { if (pixels.data[i] === r && pixels.data[i + 1] === g && pixels.data[i + 2] === b) { amount++; } } return amount; }; getting the color of a pixel in a canvas this following snippet returns an object with the rgba values of the pixel at position x and y of the canvas. this can be used to determine if the mouse cursor is inside a certain shape or not. function getpixelcolour(canvas, x, y) { var cx = canvas.getcontext('2d'); var pixel = cx.getimagedata(x, y, 1, 1); return { r: pixel.data[0], g: pixel.data[1], b: pixel.data[2], a: pixel.data[3] }; } chaining methods this class provides jquery-style chained access to 2d context methods and properties. function canvas2dcontext(canvas) { if (typeof canvas === ...

XUL user interfaces - Archive of obsolete content
r input. using this knowledge, add a rule to the stylesheet that makes the background of the date box pale blue when it has keyboard focus (but white when keyboard focus is somewhere else). what next? if you had difficulty understanding this page, or if you have other comments about it, please contribute to its discussion page. in this demonstration, you see the standard rectangular shapes that are common to most user interfaces. mozilla also supports a specialized graphics language for creating shapes, using css stylesheets to specify the style. the next page demonstrates this: svg and css. ...

Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
xpis have a complex structure designed to separate ui layers from each other. to make our xpi we'll start out by creating a directory to hold the files we're going to add to the xpi. ...

Mozilla Application Framework in Detail - Archive of obsolete content
description framework (rdf) parser with support for creating rdf graphs programmatically or by parsing files, compositing multiple sources into a single rdf graph, querying and manipulating graphs, and populating xul widgets (trees, menus, etc.) with graph data; an xslt/xpath processor; scalable vector graphics (svg) rendering with support for a usable subset of the standard including all basic shapes, beziers, stroking and filling with opacity, and much of the dom; mathml rendering; an ecma-262 edition 3-compliant javascript engine; java integration with a bridge to xpcom, a java dom api, the open jvm integration (oji) facility, a java webclient api, and java plug-ins; nspr, a runtime engine that provides platform-independence (across over a dozen platforms) for non-gui operating system ...

-ms-wrap-margin - Archive of obsolete content
initial value0applies toexclusion elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values <length> the margin size, a non-negative value. formal syntax <length> specifications not part of any specification. ...

-ms-wrap-through - Archive of obsolete content
papplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values wrap the exclusion element inherits its parent node's wrapping context. its descendant inline content wraps around exclusions defined outside the element. none the exclusion element does not inherit its parent node's wrapping context. its descendants are only subject to exclusion shapes defined inside the element. formal syntax wrap | none specifications not part of any specification. remarks you can use the -ms-wrap-through property to control the effect of exclusions; for instance, to cause one content block to wrap around an exclusion element and another to intersect the same exclusion element. the wrapping context of a box is a collection of exclusion areas contr...

CSS - Archive of obsolete content
-touch-select css property is a microsoft extension that toggles the gripper visual elements that enable touch text selection.-ms-wrap-flowthe -ms-wrap-flow css property is a microsoft extension that specifies how exclusions impact inline content within block-level elements.-ms-wrap-marginthe -ms-wrap-margin css property is a microsoft extension that specifies a margin that offsets the inner wrap shape from other shapes.-ms-wrap-throughthe -ms-wrap-through css property is a microsoft extension that specifies how content should wrap around an exclusion element.:-moz-full-screen-ancestorthe :-moz-full-screen-ancestor css pseudo-class is a mozilla extension that represents all ancestors of the full-screen element, except containing frames in parent documents, which are the full-screen element in t...

3D collision detection - Game development
(z - sphere.z)); return distance < sphere.radius; } using a physics engine 3d physics engines provide collision detection algorithms, most of them based on bounding volumes as well. the way a physics engine works is by creating a physical body, usually attached to a visual representation of it. this body has properties such as velocity, position, rotation, torque, etc., and also a physical shape. this shape is the one that is considered in the collision detection calculations. we have prepared a live collision detection demo (with source code) that you can take a look at to see such techniques in action — this uses the open-source 3d physics engine cannon.js. ...

WebVR — Virtual Reality for the Web - Game development
e that offers simple building blocks for webvr, so you can rapidly build and experiment with vr websites and games: read the building up a basic demo with a-frame tutorial for more details. immersion is more important than gameplay or graphics - you have to feel you're "inside" the experience. it's not easy to achieve, but it doesn't require realistic images. quite the contrary as having a basic shapes flying around in high framerate can make a lot. remember: experimenting is key - see what works for your game in particular. the future of webvr it's happening — consumer devices are reaching the market right now, and we already have javascript apis to support them on the web. all we need now is a stable specification, good ux and ui, better hardware and more tools and libraries — and all ...

Tiles and tilemaps overview - Game development
this results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times. ...

Finishing up - Game development
race), add in the following line, which causes the draw() function to call itself over and over again: requestanimationframe(draw); the draw() function is now getting executed again and again within a requestanimationframe() loop, but instead of the fixed 10 milliseconds frame rate, we are giving control of the framerate back to the browser. it will sync the framerate accordingly and render the shapes only when needed. this produces a more efficient, smoother animation loop than the older setinterval() method. compare your code that's all — the final version of the game is ready and set to go ! exercise: change the number of lives and the angle the ball bounces off the paddle. game over - for now! you've finished all the lessons - congratulations! by this point, you should now know...

Track the score and win - Game development
e following into your javascript, after the rest of your variables: var score = 0; you also need a drawscore() function, to create and update the score display. add the following after the collisiondetection() function: function drawscore() { ctx.font = "16px arial"; ctx.fillstyle = "#0095dd"; ctx.filltext("score: "+score, 8, 20); } drawing text on a canvas is similar to drawing a shape. the font definition looks exactly like the one in css — you can set the size and font type in the font() method. then use fillstyle() to set the color of the font and filltext() to set the actual text that will be placed on the canvas, and where it will be placed. the first parameter is the text itself — the code above shows the current number of points — and the last two parameters are th...

Gecko FAQ - Gecko Redirect 1
roducts. ...

Canvas - MDN Web Docs Glossary: Definitions of Web-related terms
it is a low level, procedural model that updates a bitmap and does not have a built-in scene graph. it provides an empty graphic zone on which specific javascript apis can draw (such as canvas 2d or webgl). ...

Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
in the example below i have a grid container with two grid items. ...

Ligature - MDN Web Docs Glossary: Definitions of Web-related terms
for example, in french "œ" is a ligature of "oe". ...

Creating fancy letterheaded paper - Learn web development
r to the letter. add a 1mm top and bottom solid border to the letter, in a color that is inkeeping with the rest of the color scheme. the logo to the <h1>, add the logo as a background image. add a filter to the logo to give it a subtle drop shadow. now comment out the filter and implement the drop shadow in a different (slightly more cross-browser compatible) way, which still follows the shape of the round image. hints and tips remember that you can create a fallback for older browsers by putting the fallback version of a declaration first, followed by the version that works across newer browsers only. older browsers will apply the first declaration and ignore the second one, whereas newer browsers will apply the first one, then override it with the second one. feel free to creat...

Organizing your CSS - Learn web development
then we'd add an additional class to deal with those tiny differences, thus extending that styling in specific ways. .media { display: grid; grid-template-columns: 1fr 3fr; } .media .content { font-size: .8rem; } .comment img { border: 1px solid grey; } .list-item { border-bottom: 1px solid grey; } in your html the comment would need both the media and comment...

Grids - Learn web development
phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> </aside> <footer>contact me@mysite.com</footer> </div> the rules for grid-template-areas are as follows: you need to have every cell of the grid filled. to span across two cells, repeat the name. to leave a cell empty, use a . (period). areas must be rectangular — you can’t have an l-shaped area for example. areas can't be repeated in different locations. you can play around with our layout, changing the footer to only sit underneath the content and the sidebar to span all the way down for example. this is a very nice way to describe a layout as it is obvious from the css exactly what is happening. a css grid, grid framework grid "frameworks" tend to be based around 12 or 16 c...

Fundamental text and font styling - Learn web development
courier new monospace some oses have an alternative (possibly older) version of the courier new font called courier. it's considered best practice to use both with courier new as the preferred alternative. georgia serif times new roman serif some oses have an alternative (possibly older) version of the times n...

Learn to style HTML using CSS - Learn web development
e flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about. solving common css problems use css to solve common problems provides links to sections of content explaining how to use css to solve very common problems when creating a web page. from the beginning, you'll primarily apply colors to html elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. but there's not much you can't do once you have a solid understanding of even the basics of css. one of the best things about learning css is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet! "css is weird" css works a bit di...

What do common web layouts contain? - Learn web development
, it should either be main content or directly related to the main content. it's a trap mica. this is a bit trickier. it looks like a three-column layout... ...but it's not. b1 and b2 float around the main content. remember that word "float"--it will ring a bell when you start learning about css. why would you think it's a three-column layout? because the image on the top-right is l-shaped, because b1 looks like a column supporting the shifted main content, and because the "m" and "i" of the mica logo create a vertical line of force. this is a good example of a classic layout supporting some design creativity. simple layouts are easier to implement, but allow yourself room to express your creativity in this area. a much trickier layout the opera de paris. basically a...

Sending forms through JavaScript - Learn web development
an build http requests, send them, and retrieve their results. historically, xmlhttprequest was designed to fetch and send xml as an exchange format, which has since been superceded by json. but neither xml nor json fit into form data request encoding. form data (application/x-www-form-urlencoded) is made of url-encoded lists of key/value pairs. for transmitting binary data, the http request is reshaped into multipart/form-data. note: the fetch api is often used in place of xhr these days — it is a modern, updated version of xhr, which works in a similar fashion but has some advantages. most of the xhr code you'll see in this article could be swapped out for fetch. if you control the front-end (the code that's executed in the browser) and the back-end (the code which is executed on the se...

Introduction to web APIs - Learn web development
across the term ajax, which describes this technique. find out more about such apis in fetching data from the server. 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 ...

What is JavaScript? - Learn web development
that allow a developer to implement programs that would otherwise be hard or impossible to implement. they do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf. they generally fall into two categories. browser apis are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. for example: the dom (document object model) api allows you to manipulate html and css, creating, removing and changing html,...

Introduction to client-side frameworks - Learn web development
hat was, up until then, composed of static documents. the web became not just a place to read things, but to do things. javascript’s popularity steadily increased. developers who worked with javascript wrote tools to solve the problems they faced, and packaged them into reusable packages called libraries, so they could share their solutions with others. this shared ecosystem of libraries helped shape the growth of the web. now, javascript is an essential part of the web, used on 95% of all websites, and the web is an essential part of modern life. users write papers, manage their budgets, stream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat. the web allows us to do things that used to be possible only in native applicati...

Starting our Svelte Todo list app - Learn web development
download the folder's content: npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior remember to run npm install && npm run dev to start your app in development mode. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2 summary with our markup and styling in place our todo list app is starting to take shape, and we have everything ready so that we can start to focus on the features we have to implement. previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state re...

Localization formats
html/php maybe you are designing a project that has relatively small translation needs like three to four lines (or more) of content asking users to update to the next version of software available. you may choose to present just the html for localization: we give an html ...

Mozilla Development Strategies
r blockers to clear. have multiple trees. at least one of them should be updated every day. you'll need this one for regressions that require your immediate attention (a new crasher, a blocker, or problem in your area, for example). use this same tree for small, quick bugs or recent regressions or crashers. for your other tree, don't update as often. update when you know that the tree is in good shape. do your primary development in this tree. you'll need to update, rebuild, re-test and make a diff against the current trunk once you feel your fix is done. but, daily regressions won't block your primary development. as far as keeping trees up to date goes, the longer you go without updating your tree, the more likely you are to have cvs conflicts. if you update every day for a week, you might ...

Hacking Tips
top at the catchpoint. just reverse-continue again to continue to your breakpoints or whatever. [hack] replacing one instruction to replace one specific instruction, you can use in visit function of each instruction the jsscript filename in lineno fields as well as the id() of the lir / mir instructions. the jsscript can be obtained from info().script(). bool codegeneratorx86shared::visitguardshape(lguardshape *guard) { if (info().script()->lineno == 16934 && guard->id() == 522) { [… another impl only for this one …] return true; } [… old impl …] [hack] spewing all compiled code i usually just add this to the apropriate executablecopy. if (getenv("inst_dump")) { char buf[4096]; sprintf(buf, "gdb /proc/%d/exe %d -batch -ex 'set pagi...

Tracing JIT
stracer.* the files jstracer.cpp and jstracer.h contain a the mechanisms of monitoring and recording the activity of the interpreter. each spidermonkey jscontext holds a trace monitor of type jstracemonitor. the trace monitor maintains some book-keeping information, as well as the collection of recorded fragments, held in a hashtable keyed by the interpreter's program counter and global object shape at the time of recording. at any moment, the trace monitor is in one of three major states: monitoring, recording, or executing. the transitions between these states are somewhat complex and delicate, but the overall picture is simple: monitoring the trace monitor's initial state is monitoring. this means that spidermonkey is interpreting bytecode. every timespidermonkey interprets a backwar...

JIT Optimization Outcomes
tion attempt failed, and the reason was not recorded. genericsuccess optimization succeeded. disabled the optimization has been explicitly disallowed. notypeinfo optimization failed because there was no type information associated with an object containing the property. this failure mode is unlikely and occurs if the target object is obtained in some roundabout way. noanalysisinfo todo noshapeinfo the baseline compiler recorded no usable shape information for this operation. unknownobject the type of the object is not known. this can happen if the operation sees many different types of objects, and so the type of the input to the operation cannot be resolved to a single type. unknownproperties optimization failed because the object containing the property was marked as having unkn...

Web Replay
js compilations and some other internal state are affected by the debugger's presence and which hooks/breakpoints are active, and so can differ between recording and replay. the debugger can allocate gc things, and allocation of other gc things can differ in the debugger's presence. for example, script compilation involves gc thing allocation, and observing changes in an object will change its shape. relaxing non-determinism here has a number of ripple effects in other areas. mainly, pointer values may differ between recording and replay, and the points where gcs occur, and the set of objects collected, may differ. this non-determinism is prevented from spreading too far with the following techniques: different pointer values can affect the internal layout of hash tables. to prevent ...

Zest
rce and can be included in any tool whether open or closed, free or commercial. zest is still at a very early stage of development, but is has been made available so that anyone can play around with it. all constructive feedback is very welcome. anyone can contribute to the onward development of zest, and teams or individuals who develop security tools are especially welcome to join and help shape zest's future. zest topics usecases reporting security vulnerabilities to developers reporting security vulnerabilities to companies defining active and passive scanner rules deep integration with security tools runtimes the runtime environments that support zest tools the tools that include support zest implementation the state of zest development video...

Mozilla Projects
her open or closed, free or commercial. zest is still at a very early stage of development, but is has been made available so that anyone can play around with it. all constructive feedback is very welcome. anyone can contribute to the onward development of zest, and teams or individuals who develop security tools are especially welcome to join and help shape zest's future. ...

Gecko events
ctive_decendent_changed the active descendant of a component has changed. the active descendant is used in objects with transient children. is supported: no event_focus an object has received the keyboard focus. is supported: yes event_state_change an object's state has changed. is supported: yes states: state_focused, state_busy, xxx: event_location_change an object has changed location, shape, or size. is supported: no event_name_change an object's name property has changed. is supported: yes targets: table_cell - the cell of <xul:tree/>, any accessible for html element when @title or @alt attribute is changed. event_description_change an object's description property has changed. is supported: no event_value_change an object's value property has changed. is supported: yes eve...

nsIAccessibleEvent
anged. event_active_decendent_changed 0x0007 0x0004 the active descendant of a component has changed. the active descendant is used in objects with transient children. event_focus 0x8005 0x0008 0x0005 an object has received the keyboard focus. event_state_change 0x800a 0x0009 0x0006 an object's state has changed. event_location_change 0x800b 0x000a 0x0007 an object has changed location, shape, or size. event_name_change 0x800c 0x000b 0x0008 an object's name property has changed. event_description_change 0x000c 0x0009 an object's description property has changed. event_value_change 0x800e 0x000d 0x000a an object's value property has changed. event_help_change 0x000e 0x000b an object's help has changed. event_defaction_change 0x000f 0x000c an object's default action has ...

nsIWinTaskbar
eir appearance in the taskbar. by default, there is a single taskbar preview per top level window (excluding pop-ups). this preview is represented by an nsitaskbarwindowpreview object. an application can register its own "tab" previews. these previews automatically hide the corresponding nsitaskbarwindowpreview. these don't have to correspond to tabs within the application; they can vary in size, shape, and location. they don't even have to represent actual gui elements on the window. unlike window previews, tab previews require most of the functionality of the nsitaskbarpreviewcontroller interface be implemented. warning: this api has undergone changes that are not yet documented. among these is the addition of the method getoverlayiconcontroller(). this method is currently known to crash if u...

Reference Manual
g started guide first. if you're trying to fix a broken build, the faq might lead you to the answer more quickly. the basics design an nscomptr is designed to be a complete replacement for raw xpcom interface pointers where they are used as owning references. almost any place you could use a raw xpcom interface pointer, you should be able to use an nscomptr. an nscomptr is the exact same size and shape as a raw xpcom interface pointer. it can be used as a member variable without introducing bloat. most of the work of being an owning reference can be done in the constructor, destructor, and assignment operators of nscomptr. whenever you `point' the nscomptr at a different xpcom object (by assignment or initialization), it must release its old value, if any, and addref the new. at its own destruc...

Creating a gloda message query
port("resource:///modules/gloda/public.js"); create the query let query = gloda.newquery(gloda.noun_message); add constraints to the query each constraint function takes one or more arguments which are "or"ed together. so if we had a "color" constraint such as query.color("red", "green", "blue") would mean any of red, green, or blue is okay. constraints are "and"ed together. so if we had a "shape" constraint such as query.shape("square") and we combined it with the previous color constraint it would match a red square, a green square, or a blue square. query.involves(identity1, identity2, ...): add the constraint that the message must "involve" one of the identities provided. an identity is involved if the message was to them, from them, or carbon-copied to them. gloda.from, gloda.to,...

Zombie compartments
│ ├───7.83 mb (01.57%) -- js-compartment(https://www.google.de/) │ │ │ │ ├──3.56 mb (00.71%) -- objects │ │ │ │ │ ├──3.04 mb (00.61%) ++ gc-heap │ │ │ │ │ ├──0.51 mb (00.10%) ++ malloc-heap │ │ │ │ │ └──0.00 mb (00.00%) ── non-heap/code/asm.js │ │ │ │ ├──2.43 mb (00.49%) -- shapes │ │ │ │ │ ├──1.47 mb (00.29%) ++ gc-heap │ │ │ │ │ └──0.96 mb (00.19%) ++ malloc-heap │ │ │ │ ├──1.03 mb (00.21%) -- scripts │ │ │ │ │ ├──0.72 mb (00.14%) ── gc-heap [2] │ │ │ │ │ └──0.31 mb (00.06%) ── malloc-heap/data [2] │ │ │ │ ├──0.80 mb (00.16%) -- typ...

Drawing and Event Handling - Plugins
in writer with some significant design possibilities: you can place a windowless plug-in within a section; other sections can exist both above and below it. you can create transparent plug-ins. in this case, the browser draws the part of the page that exists behind the plug-in. the windowless plug-in draws only the parts of itself that are opaque. this way, the plug-in can draw an irregularly shaped area, such as a figure, or text over the existing background. the browser supports off-screen drawing of plug-ins. this makes it possible to manipulate plug-in contents. for example, a 3d application could use the contents of a plug-in as a texture map. because windowless plug-ins can be layered or drawn to arbitrary drawables, the browser (as opposed to the native windowing system) is respon...

Index - Firefox Developer Tools
, tools the grid inspector allows you to examine css grid layouts using the firefox devtools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more. 58 edit css filters css, devtools, filters, page inspector, tools css filter properties in the rules view have a circular gray and white swatch next to them: 59 edit shape paths in css css, devtools, page inspector, rules view, tools, highlighter, shapes the shape path editor is a tool that helps you see and edit shapes created using clip-path and also the css shape-outside property and <basic-shape> values. this guide walks you through all of the available options. 60 edit fonts fonts, guide, inspector, tools, variable fonts this art...

Aggregate view - Firefox Developer Tools
y see, for example, how many objects of a specific class were allocated. type this is the default view, which looks something like this: it groups the things on the heap into types, including: javascript objects: such as function or array dom elements: such as htmlspanelement or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape". these are prefixed with "js::". each type gets a row in the table, and rows are ordered by the amount of memory occupied by objects of that type. for example, in the screenshot above you can see that javascript objects account for most memory, followed by strings. the "total count" column shows you the number of objects of each category that are currently allocated. the "total bytes" colu...

How to - Firefox Developer Tools
links for various how to's can be found here. these links describe in depth the how to techniques. ...

Page Inspector - Firefox Developer Tools
how to to find out what you can do with the inspector, see the following how to guides: open the inspector examine and edit html examine and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference keyboard shortcuts settings ...

AudioNode.channelCountMode - Web APIs
e values of channelcountmode and their meanings are: value description the following audionode children default to this value max the number of channels is equal to the maximum number of channels of all connections. in this case, channelcount is ignored and only up-mixing happens. gainnode, delaynode, scriptprocessornode, channelmergernode, biquadfilternode, waveshapernode clamped-max the number of channels is equal to the maximum number of channels of all connections, clamped to the value of channelcount. pannernode, convolvernode, dynamicscompressornode explicit the number of channels is defined by the value of channelcount. audiodestinationnode, analysernode, channelsplitternode in older versions of the spec, the defaul...

AudioWorkletProcessor - Web APIs
sor. the array of audioparamdescriptor-based objects returned is used internally to create the audioparams during the instantiation of the audioworkletnode. the resulting audioparams reside in the parameters property of the node and can be automated using standard methods such as linearramptovalueattime. their calculated values will be passed into the process() method of the processor for you to shape the node output accordingly. processing audio an example algorithm of creating a custom audio processing mechanism is: create a separate file; in the file: extend the audioworkletprocessor class (see "deriving classes" section) and supply your own process() method in it; register the processor using audioworkletglobalscope.registerprocessor() method; load the file using addmo...

BaseAudioContext.createBiquadFilter() - Web APIs
llowing example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...

BaseAudioContext.createConvolver() - Web APIs
which is commonly used to apply reverb effects to your audio. see the spec definition of convolution for more information. syntax baseaudiocontext.createconvolver(); returns a convolvernode. example the following example shows basic usage of an audiocontext to create a convolver node. the basic premise is that you create an audiobuffer containing a sound sample to be used as an ambience to shape the convolution (called the impulse response,) and apply that to the convolver. the example below uses a short sample of a concert hall crowd, so the reverb effect applied is really deep and echoey. for applied examples/information, check out our voice-change-o-matic demo (see app.js for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var convolver = aud...

BaseAudioContext.createPeriodicWave() - Web APIs
syntax var wave = audiocontext.createperiodicwave(real, imag[, constraints]); returns a periodicwave. parameters real an array of cosine terms (traditionally the a terms). imag an array of sine terms (traditionally the b terms). the real and imag arrays have to have the same length, otherwise an error is thrown. ...

BaseAudioContext - Web APIs
wave, used to define a periodic waveform that can be used to determine the output of an oscillatornode. baseaudiocontext.createscriptprocessor() creates a scriptprocessornode, which can be used for direct audio processing via javascript. baseaudiocontext.createstereopanner() creates a stereopannernode, which can be used to apply stereo panning to an audio source. baseaudiocontext.createwaveshaper() creates a waveshapernode, which is used to implement non-linear distortion effects. baseaudiocontext.decodeaudiodata() asynchronously decodes audio file data contained in an arraybuffer. in this case, the arraybuffer is usually loaded from an xmlhttprequest's response attribute after setting the responsetype to arraybuffer. this method only works on complete files, not fragments of audio fi...

BiquadFilterNode.Q - Web APIs
llowing example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...

BiquadFilterNode.detune - Web APIs
llowing example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...

BiquadFilterNode.frequency - Web APIs
llowing example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...

BiquadFilterNode.gain - Web APIs
llowing example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...

BiquadFilterNode.type - Web APIs
llowing example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...

BiquadFilterNode - Web APIs
llowing example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...

CanvasRenderingContext2D.arcTo() - Web APIs
result in this example, the path created by arcto() is thick and black. tangent lines are gray, control points are red, and the start point is blue. creating a rounded corner this example creates a rounded corner using arcto(). this is one of the method's most common uses. html <canvas id="canvas"></canvas> javascript the arc begins at the point specified by moveto(): (230, 20). it is shaped to fit control points at (90, 130) and (20, 20), and has a radius of 50. the lineto() method connects the arc to (20, 20) with a straight line. note that the arc's second control point and the point specified by lineto() are the same, which produces a totally smooth corner. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const p0 = { x: 230, y: 20 } const...

CanvasRenderingContext2D.clearRect() - Web APIs
h and height attributes. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.clearrect(0, 0, canvas.width, canvas.height); erasing part of a canvas this example draws a blue triangle on top of a yellowish background. the clearrect() method then erases part of the canvas. html <canvas id="canvas"></canvas> javascript the cleared area is rectangular in shape, with its top-left corner at (10, 10). the cleared area has a width of 120 and a height of 100. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw yellow background ctx.beginpath(); ctx.fillstyle = '#ff6'; ctx.fillrect(0, 0, canvas.width, canvas.height); // draw blue triangle ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(180...

CanvasRenderingContext2D.closePath() - Web APIs
the canvasrenderingcontext2d.closepath() method of the canvas 2d api attempts to add a straight line from the current point to the start of the current sub-path. if the shape has already been closed or has only one point, this function does nothing. this method doesn't draw anything to the canvas directly. you can render the path using the stroke() or fill() methods. syntax void ctx.closepath(); examples closing a triangle this example creates the first two (diagonal) sides of a triangle using the lineto() method. after that, the triangle's base is created with the closepath() method, which automatically connects the shape's first and last points. html <canvas id="canvas"></canvas> javascript the triangle's corners are at (20, 150), (120, 20), and (220, 150). const canvas = docume...

CanvasRenderingContext2D.createLinearGradient() - Web APIs
the canvasrenderingcontext2d.createlineargradient() method of the canvas 2d api creates a gradient along the line connecting two given coordinates. this method returns a linear canvasgradient. to be applied to a shape, the gradient must first be assigned to the fillstyle or strokestyle properties. note: gradient coordinates are global, i.e., relative to the current coordinate space. when applied to a shape, the coordinates are not relative to the shape's coordinates. syntax canvasgradient ctx.createlineargradient(x0, y0, x1, y1); the createlineargradient() method is specified by four parameters defining the start and end points of the gradient line. parameters x0 the x-axis coordinate of the start point. y0 the y-axis coordinate of the start point. x1 the x-axis coordinate o...

CanvasRenderingContext2D.createRadialGradient() - Web APIs
the canvasrenderingcontext2d.createradialgradient() method of the canvas 2d api creates a radial gradient using the size and coordinates of two circles. this method returns a canvasgradient. to be applied to a shape, the gradient must first be assigned to the fillstyle or strokestyle properties. note: gradient coordinates are global, i.e., relative to the current coordinate space. when applied to a shape, the coordinates are not relative to the shape's coordinates. syntax canvasgradient ctx.createradialgradient(x0, y0, r0, x1, y1, r1); the createradialgradient() method is specified by six parameters, three defining the gradient's start circle, and three defining the end circle. parameters x0 the x-axis coordinate of the start circle. y0 the y-axis coordinate of the start circle.

CanvasRenderingContext2D.fillStyle - Web APIs
the canvasrenderingcontext2d.fillstyle property of the canvas 2d api specifies the color, gradient, or pattern to use inside shapes. the default style is #000 (black). for more examples of fill and stroke styles, see applying styles and color in the canvas tutorial. syntax ctx.fillstyle = color; ctx.fillstyle = gradient; ctx.fillstyle = pattern; options color a domstring parsed as css <color> value. gradient a canvasgradient object (a linear or radial gradient). pattern a canvaspattern object (a repeating image). examples changing the fill color of a shape this example applies a blue fill color to a rectangle. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'blue'; ctx.

CanvasRenderingContext2D.globalCompositeOperation - Web APIs
see also compositing and clipping in the canvas tutorial. syntax ctx.globalcompositeoperation = type; type is a string identifying which of the compositing or blending mode operations to use. types examples changing the composite operation this example uses the globalcompositeoperation property to draw two rectangles that exclude themselves where they overlap. ...

CanvasRenderingContext2D.lineCap - Web APIs
the canvasrenderingcontext2d.linecap property of the canvas 2d api determines the shape used to draw the end points of lines. note: lines can be drawn with the stroke(), strokerect(), and stroketext() methods. syntax ctx.linecap = "butt" || "round" || "square"; options "butt" the ends of lines are squared off at the endpoints. default value. "round" the ends of lines are rounded. "square" the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness. examples changing the shape of line caps this example rounds the end caps of a straight line. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 20); ctx.line...

CanvasRenderingContext2D.resetTransform() - Web APIs
s a filled rectangle, adjusted according to that matrix. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else. in this example, the first two shapes are drawn with a skew transformation, and the last two are drawn with the identity (regular) transformation. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // skewed rectangles ctx.transform(1, 0, 1.7, ...

CanvasRenderingContext2D.setTransform() - Web APIs
al skewing. d (m22) vertical scaling. a value of 1 results in no scaling. e (dx) horizontal translation (moving). f (dy) vertical translation (moving). the newer type consists of a single parameter, matrix, representing a 2d transformation matrix to set (technically, a dommatrixinit object; any object will do as long as it contains the above components as properties). examples skewing a shape this example skews a rectangle both vertically (.2) and horizontally (.8). scaling and translation remain unchanged. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.settransform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result retrieving and passing a dommatrix object in the following ex...

CanvasRenderingContext2D.shadowBlur - Web APIs
syntax ctx.shadowblur = level; level a non-negative float specifying the level of shadow blur, where 0 represents no blur and larger numbers represent increasingly more blur. this value doesn't correspond to a number of pixels, and is not affected by the current transformation matrix. the default value is 0. negative, infinity, and nan values are ignored. examples adding a shadow to a shape this example adds a blurred shadow to a rectangle. the shadowcolor property sets its color, and shadowblur sets its level of bluriness. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowblur = 15; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100...

CanvasRenderingContext2D.strokeStyle - Web APIs
the canvasrenderingcontext2d.strokestyle property of the canvas 2d api specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes. the default is #000 (black). for more examples of stroke and fill styles, see applying styles and color in the canvas tutorial. syntax ctx.strokestyle = color; ctx.strokestyle = gradient; ctx.strokestyle = pattern; options color a domstring parsed as css <color> value. gradient a canvasgradient object (a linear or radial gradient). pattern a canvaspattern object (a repeating image). examples changing the stroke color of a shape this example applies a blue stroke color to a rectangle. html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ...

CanvasRenderingContext2D.transform() - Web APIs
[acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters a (m11) horizontal scaling. a value of 1 results in no scaling. b (m12) vertical skewing. c (m21) horizontal skewing. d (m22) vertical scaling. a value of 1 results in no scaling. e (dx) horizontal translation (moving). f (dy) vertical translation (moving). examples skewing a shape this example skews a rectangle both vertically (.2) and horizontally (.8). scaling and translation remain unchanged. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result specifications specification status comment ...

CanvasRenderingContext2D.translate() - Web APIs
) method adds a translation transformation to the current matrix by moving the canvas and its origin x units horizontally and y units vertically on the grid. parameters x distance to move in the horizontal direction. positive values are to the right, and negative to the left. y distance to move in the vertical direction. positive values are down, and negative are up. examples moving a shape this example draws a square that is moved from its default position by the translate() method. an unmoved square of the same size is then drawn for comparison. html <canvas id="canvas"></canvas> javascript the translate() method translates the context by 110 horizontally and 30 vertically. the first square is shifted by those amounts from its default position. const canvas = document.getel...

Finale - Web APIs
chnologies are constantly arriving 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 ...

Hit regions and accessibility - Web APIs
can help to make it more accessible. fallback content the content inside the <canvas> ... </canvas> tags can be used as a fallback for browsers which don't support canvas rendering. it's also very useful for assistive technology users (like screen readers) which can read and interpret the sub dom in it. a good example at html5accessibility.com demonstrates how this can be done: <canvas> <h2>shapes</h2> <p>a rectangle with a black border. in the background is a pink circle. partially overlaying the <a href="http://en.wikipedia.org/wiki/circle" onfocus="drawcircle();" onblur="drawpicture();">circle</a>. partially overlaying the circle is a green <a href="http://en.wikipedia.org/wiki/square" onfocus="drawsquare();" onblur="drawpicture();">square</a> and a purple <a href="htt...

Using images - Web APIs
one of the more exciting features of <canvas> is the ability to use images. these can be used to do dynamic photo compositing or as backdrops of graphs, for sprites in games, and so forth. external images can be used in any format supported by the browser, such as png, gif, or jpeg. you can even use the image produced by other canvas elements on the same page as the source! importing images into a canvas is basically a two step process: get a reference to an htmlimageelement object or to another canvas element as a source. it is also possible to use images by providing a url. ...

Canvas tutorial - Web APIs
t supported in some older browsers, but is supported in recent versions of all major browsers. the default size of the canvas is 300 pixels × 150 pixels (width × height). ...

DOMMatrixReadOnly.flipX() - Web APIs
tes a new matrix being the result of the original matrix flipped about the x-axis. syntax dommatrix.flipx() return value returns a dommatrix containing a new matrix being the result of the original matrix flipped about the x-axis, which is equivalent to multiplying the matrix by dommatrix(-1, 0, 0, 1, 0, 0). the original matrix is not modified. examples this svg contains two paths in the shape of a triangle, both drawn to the same position. note that the x co-ordinate of the viewbox attribute is negative, showing us content from both sides of the x-axis. <svg width="100" height="100" viewbox="-50 0 100 100"> <path fill="red" d="m 0 50 l 50 0 l 50 100 z" /> <path id="flipped" fill="blue" d="m 0 50 l 50 0 l 50 100 z" /> </svg> this javascript first creates an identity matrix, then...

HTMLAreaElement.referrerPolicy - Web APIs
e referrer will include the origin and the path (but not the fragment, password, or username). this case is unsafe as it can leak path information that has been concealed to third-party by using tls. examples <img usemap="#maparound" width="100" height="100" src="/img/logo@2x.png" /> <map id="mymap" name="maparound" />> var elt = document.createelement("area"); elt.href = "/img2.png"; elt.shape = "rect"; elt.referrerpolicy = "no-referrer"; elt.coords = "0,0,100,100"; var map = document.getelementbyid("mymap"); map.appendchild(elt); // when clicked, the area's link will not send a referrer header. specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification. candidate recommendation add...

HTMLAreaElement - Web APIs
current document to the linked resource. htmlareaelement.rellist read only returns a domtokenlist that reflects the rel html attribute, indicating relationships of the current document to the linked resource, as a list of tokens. htmlhyperlinkelementutils.search is a usvstring containing the search element (including leading question mark '?'), if any, of the referenced url. htmlareaelement.shape is a domstring that reflects the shape html attribute, indicating the shape of the hot-spot, limited to known values. htmlelement.tabindex is a long containing the element's position in the tabbing order. htmlareaelement.target is a domstring that reflects the target html attribute, indicating the browsing context in which to open the linked resource. htmlareaelement.type is a domstring th...

HTMLLinkElement - Web APIs
e definition of 'htmllinkelement' in that specification. living standard adds the following properties: crossorigin, referrerpolicy, and as. html 5.1the definition of 'htmllinkelement' in that specification. recommendation html5the definition of 'htmllinkelement' in that specification. recommendation the following properties are now obsolete: charset, rev, and shape. the following properties have been added: rellist, and sizes. document object model (dom) level 2 html specificationthe definition of 'htmllinkelement' in that specification. obsolete added a second inheritence, the linkstyle interface. document object model (dom) level 1 specificationthe definition of 'htmllinkelement' in that specification. obsolete initial de...

Intersection Observer API - Web APIs
callback is executed on the main thread. it should operate as quickly as possible; if anything time-consuming needs to be done, use window.requestidlecallback(). also, note that if you specified the root option, the target must be a descendant of the root element. how intersection is calculated all areas considered by the intersection observer api are rectangles; elements which are irregularly shaped are considered as occupying the smallest rectangle which encloses all of the element's parts. similarly, if the visible portion of an element is not rectangular, the element's intersection rectangle is construed to be the smallest rectangle that contains all the visible portions of the element. it's useful to understand a bit about how the various properties provided by intersectionobserverentr...

OscillatorNode.OscillatorNode() - Web APIs
stead. syntax var oscillatornode = new oscillatornode(context, options) parameters inherits parameters from the audionodeoptions dictionary. context a reference to an audiocontext. options optional an object whose properties specify the initial values for the oscillator node's properties. any properties omitted from the object will take on the default value as documented. type the shape of the wave produced by the node. valid values are 'sine', 'square', 'sawtooth', 'triangle' and 'custom'. the default is 'sine'. detune a detuning value (in cents) which will offset the frequency by the given amount. its default is 0. frequency the frequency (in hertz) of the periodic waveform. its default is 440. periodicwave an arbitrary period waveform described by a periodicwave o...

OscillatorNode - Web APIs
tion in hertz (though the audioparam returned is read-only, the value it represents is not). the default value is 440 hz (a standard middle-a note). oscillatornode.detune an a-rate audioparam representing detuning of oscillation in cents (though the audioparam returned is read-only, the value it represents is not). the default value is 0. oscillatornode.type a string which specifies the shape of waveform to play; this can be one of a number of standard values, or custom to use a periodicwave to describe a custom waveform. different waves will produce different tones. standard values are "sine", "square", "sawtooth", "triangle" and "custom". the default is "sine". event handlers oscillatornode.onended sets the event handler for the ended event, which fires when the tone has stopp...

Path2D - Web APIs
you the convenience of being able to retain and replay your path whenever desired. constructors path2d() path2d constructor. creates a new path2d object. methods path2d.addpath() adds a path to the current path. path2d.closepath() causes the point of the pen to move back to the start of the current sub-path. it tries to draw a straight line from the current point to the start. if the shape has already been closed or has only one point, this function does nothing. path2d.moveto() moves the starting point of a new sub-path to the (x, y) coordinates. path2d.lineto() connects the last point in the subpath to the (x, y) coordinates with a straight line. path2d.beziercurveto() adds a cubic bézier curve to the path. it requires three points. the first two points are control points ...

PeriodicWave - Web APIs
periodicwave has no inputs or outputs; it is used to define custom oscillators when calling oscillatornode.setperiodicwave(). the periodicwave itself is created/returned by audiocontext.createperiodicwave(). constructor periodicwave.periodicwave() creates a new periodicwave object instance using the default values for all properties. if you wish to establish custom property values at the outset, use the audiocontext.createperiodicwave() factory method instead. properties none; also, periodicwave doesn't inherit any properties. methods none; also, periodicwave doesn't inherit any methods. ...

SVGGeometryElement.isPointInFill() - Web APIs
normal hit testing rules apply; the value of the pointer-events property on the element determines whether a point is considered to be within the fill. the point argument is interpreted as a point in the local coordiante system of the element. syntax boolean someelement.ispointinfill(dompointinit point); parameters point a dompointinit interpreted as a point in the local coordiante system of the element. return value a boolean indicating whether the given point is within the fill or not. ...

SVGGeometryElement.isPointInStroke() - Web APIs
normal hit testing rules apply; the value of the pointer-events property on the element determines whether a point is considered to be within the stroke. the point argument is interpreted as a point in the local coordiante system of the element. syntax boolean someelement.ispointinstroke(dompointinit point); parameters point a dompointinit interpreted as a point in the local coordinate system of the element. return value a boolean indicating whether the given point is within the stroke or not. ...

The 'X' property - Web APIs
ength in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates). ...

SVGTransformList - Web APIs
candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgtransformlist' in that specification. recommendation initial defin...

Touch.radiusX - Web APIs
summary returns the x radius of the ellipse that most closely circumscribes the area of contact with the touch surface. the value is in css pixels of the same scale as touch.screenx. 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. it is specified in the touch events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. syntax var xradius = touchitem.radiusx; return value xr...

Touch.radiusY - Web APIs
summary returns the y radius of the ellipse that most closely circumscribes the area of contact with the touch surface. the value is in css pixels of the same scale as touch.screenx. 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. it is specified in the touch events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. syntax var yradius = touchitem.radiusy; return value yradius the y...

Touch.rotationAngle - Web APIs
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. ...

TouchEvent - Web APIs
h is sent when the state of contacts with a touch-sensitive surface changes. this surface can be a touch screen or trackpad, for example. the event can describe one or more points of contact with the screen and includes support for detecting movement, addition and removal of contact points, and so forth. touches are represented by the touch object; each touch is described by a position, size and shape, amount of pressure, and target element. lists of touches are represented by touchlist objects. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin me...

WebGLRenderingContext - Web APIs
width and height properties of the canvas remain at default values, which are different than the actual size of the canvas element in the browser window. the effect is clearly visible when using scissor() and clear() to draw a square in the center of the canvas, by specifying its position and size in pixels. in the first canvas, we get the desired result. in the second, the square has the wrong shape, size, and position. <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeven...

Canvas size and WebGL - Web APIs
width and height properties of the canvas remain at default values, which are different than the actual size of the canvas element in the browser window. the effect is clearly visible when using scissor() and clear() to draw a square in the center of the canvas, by specifying its position and size in pixels. in the first canvas, we get the desired result. in the second, the square has the wrong shape, size, and position. <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addev...

WebGL tutorial - Web APIs
avascript. the <canvas> element and webgl are not supported in some older browsers, but are supported in recent versions of all major browsers. in order to draw graphics on the canvas we use a javascript context object, which creates graphics on the fly. in this tutorial getting started with webgl how to set up a webgl context. adding 2d content to a webgl context how to render simple flat shapes using webgl. using shaders to apply color in webgl demonstrates how to add color to shapes using shaders. animating objects with webgl shows how to rotate and translate objects to create simple animations. creating 3d objects using webgl shows how to create and animate a 3d object (in this case, a cube). using textures in webgl demonstrates how to map textures onto the faces of an object...

WebGL: 2D and 3D graphics for the web - Web APIs
estions to help you improve the quality, performance, and reliability of your webgl content. using extensions a guide to using webgl extensions. tutorials webgl tutorial a beginner's guide to webgl core concepts. a good place to start if you don't have previous webgl experience. examples a basic 2d webgl animation example this example demonstrates the simple animation of a one-color shape. topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in webgl. webgl by example a series of live samples with short explanations that showcase webgl concepts and capabilities. the examples are sorted according to topic and level of difficulty, covering the webgl rendering context, shader programmi...

Web Video Text Tracks Format (WebVTT) - Web APIs
the default constructor vttcue(starttime, endtime, text) where starting time, ending time and text for cue can be adjusted. after that we can set the region for that particular cue to which this cue belongs using cue.region. vertical, horizontal, line, linealign, position, positionalign, text, size and align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in html using css. but the vttcue interface is within the webvtt provides the vast range of adjustment variables which can be used directly to alter the cue. following interface can be used to expose webvtt cues in dom api: enum autokeyword { "auto" }; enum directionsetting { "" /* horizontal */, "rl", "lr" }; enum linealignsetting { "start", "center", "end" }; enum positionaligns...

Fundamentals of WebXR - Web APIs
concept of fov. the blue wedge represents the field of view of the leflt eye; the red wedge is the fov of the right eye. the overlapping area, which is sort of a shade of purple, is the area in which the viewer has binocular vision and, as a result, depth perception. if you look carefully, you'll see that each eye sees the die slightly differently, and the combined view blends the two into a 3d shape. generally, only the horizontal fov is specifically defined and managed by applications. for more details about this, see the optics of 3d in rendering and the webxr frame animation callback. field of view and mixed reality devices to achieve a wide enough field of view that the user's eyes are tricked into believing that the virtual world completely surrounds them, the fov needs to at least a...

Lighting a WebXR setting - Web APIs
t offer support for lighting estimation. however, a specification is currently being drafted under the auspices of the w3c. you can learn all about the proposed api and a fair amount about the concept of lighting estimation in the explainer documnent that's included in the specification's github repository. in essence, lighting estimation collects this information about the light sources and the shape and orientation of the objects in the scene, along with information about the materials they're made of, then returns data you can use to create virtual light source objects that approximately match the real world's lighting. the specifics of how lighting estimation works, especially in the context of the proposed api, is out of scope for the moment. once the api has stabilized, we'll update thi...

Rendering and the WebXR frame animation callback - Web APIs
st xdeltarotation = (xrotationdegreespersecond * radians_per_degree) * deltatime; const ydeltarotation = (yrotationdegreespersecond * radians_per_degree) * deltatime; const zdeltarotation = (zrotationdegreespersecond * radians_per_degree) * deltatime; this computes the amount by which the object has rotated around each of the three axes since the last time the frame was drawn. without this, the shape would rotate by the given amount every frame, regardless of the elapsed time. this could cause substantial stutter in many cases. the same concept applied for objects that are moving rather than simply rotating: const xdistancemoved = xspeedpersecond * deltatime; const ydistancemoved = yspeedpersecond * deltatime; const zdistancemoved = zspeedpersecond * deltatime; xspeedpersecond, yspeedpers...

Using the Web Audio API - Web APIs
scripts can trigger audio to play. these special requirements are in place essentially because unexpected sounds can be annoying and intrusive, and can cause accessibility problems. you can learn more about this in our article autoplay guide for media and web audio apis. since our scripts are playing audio in response to a user input event (a click on a play button, for instance), we're in good shape and should have no problems from autoplay blocking. so, let's start by taking a look at our play and pause functionality. we have a play button that changes to a pause button when the track is playing: <button data-playing="false" role="switch" aria-checked="false"> <span>play/pause</span> </button> before we can play our track we need to connect our audio graph from the audio source/input...

XRBoundedReferenceSpace - Web APIs
s an essentially unrestricted space around the viewer's position. these bounds are defined using an array of points, each of which defines a vertex in a polygon inside which the user is allowed to move. this is typically used when the xr system is capable of tracking the user's physical movement within a limited distance of their starting position. the specified bounds may, in fact, describe the shape and size of the room the user is located in, in order to let the webxr site or application prevent the user from colliding with the walls or other obstacles in the real world. at a minimum, the boundaries indicate the area in which the xr device is capable of tracking the user's movement. see the article using bounded reference spaces for details on how bounded spaces work and why they're useful...

XRInputSource.gripSpace - Web APIs
. syntax var xrspace = xrinputsource.gripspace; value an xrspace object representing the position and orientation of the input device in virtual space, suitable for rendering an image of the device into the scene. gripspace is null if the input source is inherently untrackable. for example, only inputs whose targetraymode is tracked-pointer provide a gripspace. imagine that the controller is shaped like a straight rod, held in the user's fist. the native origin of the grip space is located at the centroid—the center of mass—of the user's fist, tracking the position of the user's hand. the coordinate system for the left hand's grip space. the coordinate system for the right hand's grip space. as shown in the diagram above, the coordinate system is oriented as follows: ...

XRTargetRayMode - Web APIs
or by tapping or clicking on the target using a finger on a screen or with a mouse. typically a target ray is drawn from the source of the targeting system along the target ray in the direction in which the user is looking or pointing. the style of the ray is generally up to you, as is the method for indicating the endpoint of the ray. the targeted point or object might be indicated by drawing a shape or highlighting the targeted surface or object. a target ray emitted by a hand controller. the target ray can be anything from a simple line (ideally fading over distance) to an animated effect, such as the science-fiction "phaser" style shown in the screenshot above. values gaze the user is using a gaze-tracking system (or gaze input) which detects the direction in which the user is l...

Web APIs
cklist visualviewport w webgl_color_buffer_float webgl_compressed_texture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context wakelock wakelocksentinel waveshapernode webgl2renderingcontext webglactiveinfo webglbuffer webglcontextevent webglframebuffer webglprogram webglquery webglrenderbuffer webglrenderingcontext webglsampler webglshader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject webkitcssmatrix websocket wheelevent window windowclient windoweventhandlers windoworworkerg...

Web Accessibility: Understanding Colors and Luminance - Accessibility
for you is tom jewett's "mini color selector" with hsl, rgb, hex options for checking contrast in the browser. luminance and contrast contrast contrast between colors ("hues") is a critical component, but the use of color ("hues") alone is not enough to create accessible content. as mentioned before, any calculation of contrast must include luminance in the calculation. in addition, the "shape" of the text itself will matter. thin letters will be harder to read than thick ones; all type faces need space to "breathe" for human perception. in general, for accessibility purposes, the more contrast the better. that changes with animation. "safer" animation means images with less contrast, not more. for more on color contrast in animation, see three flashes or below threshold understand...

Text labels and names - Accessibility
sistive technology — they need alternative text to be able to understand the purpose of an image. examples the following example show a simple image map (taken from h24: providing text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library. select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example. see also <area> h24: providing text alternatives for the area elements of image maps dialogs should be labeled for any container whose contents act as...

-moz-image-rect - CSS: Cascading Style Sheets
u to, for example, use different parts of one larger image as backgrounds in different parts of your content. this works very similarly to the -moz-image-region property, which is used with the list-style-image property to use parts of an image as the bullets in lists. however, this can be used for any css background. the syntax for the rectangle is similar to the rect() function generating a <<shape>()> css type. all four values are relative to the upper left corner of the image. examples this example loads an image and uses it in four segments to draw the firefox logo in four <div> blocks. clicking on their container causes the four segments to rotate around by swapping the background-image property values among the four <div> blocks. css the css defines one container style, then the st...

-webkit-text-security - CSS: Cascading Style Sheets
it only affects fields that are not of type=password. syntax -webkit-text-security: circle; -webkit-text-security: disc; -webkit-text-security: square; -webkit-text-security: none; formal definition value not found in db! formal syntax syntax not found in db! examples obscuring a text input try typing in the field below. if your browser supports this property, the characters should be visually replaced with squares. ...

Using feature queries - CSS: Cascading Style Sheets
f the browser does not support row-gap. testing for more than one feature you may need to test support for more than one property in your feature query. to do so, you can include a list of features to test for, separated by and keywords: @supports (property1: value) and (property2: value) { css rules to apply } for example, if the css you want to run requires that the browser supports css shapes and css grid, you could create a rule which checks for both of these things. the following rule will only return true if both shape-outside: circle() and display: grid are supported by the browser. you can also use or, if one property out of a selection could match to enable the css you want to use: @supports (property1: value) or (property2: value) { css rules to apply } this can be part...

Basic Concepts of grid layout - CSS: Cascading Style Sheets
able cell. as we saw in our earlier examples, once a grid is defined as a parent the child items will lay themselves out in one cell each of the defined grid. in the below image, i have highlighted the first cell of the grid. grid areas items can span one or more cells both by row or by column, and this creates a grid area. grid areas must be rectangular – it isn’t possible to create an l-shaped area for example. the highlighted grid area spans two row and two column tracks. gutters gutters or alleys between grid cells can be created using the column-gap and row-gap properties, or the shorthand gap. in the below example, i am creating a 10-pixel gap between columns and a 1em gap between rows. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 10px; ...

Grid template areas - CSS: Cascading Style Sheets
this by repeating the name of that grid area multiple times with white space between. you can add extra white space in order to keep your columns neatly lined up in the value of grid-template-areas. you can see that i have done this in order that the hd and ft line up with main. the area that you create by chaining the area names must be rectangular, at this point there is no way to create an l-shaped area. the specification does note that a future level might provide this functionality. you can however span rows just as easily as columns. for example we could make our sidebar span down to the end of the footer by replacing the . with sd. .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-bo...

CSS Motion Path - CSS: Cascading Style Sheets
motion path is a css module that allows authors to animate any graphical object along a custom path. the idea is that when you want to animate an element moving along a path, you previously only had animating translation, position, etc. at your disposal, which wasn't ideal and only allowed for simple movements. with offset-path you can define a specific path of any shape you want. you then animate it along that path by animating offset-distance, and can choose to rotate it at any point using offset-rotate. basic example <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } ...

Using CSS transforms - CSS: Cascading Style Sheets
this guide provides an introduction to using transforms. css transforms are implemented using a set of css properties that let you apply affine linear transformations to html elements. these transformations include rotation, skewing, scaling, and translation both in the plane and in the 3d space. only elements positioned by the box model can be transformed. as a rule of thumb, an element is positioned by the box model if it has display: block. ...

Animatable CSS properties - CSS: Cascading Style Sheets
roll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-coordinate scroll-snap-destination scrollbar-color shape-image-threshold shape-margin shape-outside tab-size text-decoration text-decoration-color text-decoration-thickness text-emphasis text-emphasis-color text-indent text-shadow text-underline-offset top transform transform-origin translate vertical-align visibility width word-spacing z-index zoom...

Compositing and Blending - CSS: Cascading Style Sheets
compositing and blending is a css module that defines how shapes of different elements are combined into a single image. reference properties background-blend-mode isolation mix-blend-mode data types <blend-mode> specifications specification status comment compositing and blending level 1 candidate recommendation initial definition ...

Viewport concepts - CSS: Cascading Style Sheets
ectly into the html, or the parent if the parent element has a width assigned and — not the viewport’s width. with the above media query being in our svg file, the css is applied if the svg container is between 400 and 500px. javascript the visual viewport api provides a mechanism for querying and modifying the properties of the visual viewport. mobile viewports mobile devices come in all shapes and sizes, with screens of differing device pixel ratios. the mobile browser's viewport is the area of the window in which web content can be seen, which is not necessarily the same size as the rendered page. mobile browsers render pages in a virtual window or viewport, generally at 980px, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at o...

<alpha-value> - CSS: Cascading Style Sheets
ion when animated, values of the <alpha-value> css data type are interpolated as real, floating-point numbers. the speed of the interpolation is determined by the timing function associated with the animation. examples setting text color opacity here an alpha value is used to set partially transparent text: /* <rgba()> */ color: rgba(34, 12, 64, 0.6); color: rgba(34.0 12 64 / 60%); setting shape image threshold here an alpha value is used to determine which parts of an image are considered part of a shape: /* shape-image-threshold */ shape-image-threshold: 70%; shape-image-threshold: 0.7; specifications specification status comment css color module level 4the definition of '<alpha-value>' in that specification. working draft no significant change. ...

cursor - CSS: Cascading Style Sheets
ait the program is busy, and the user can't interact with the interface (in contrast to progress). sometimes an image of an hourglass or a watch. selection cell the table cell or set of cells can be selected. crosshair cross cursor, often used to indicate selection in a bitmap. text the text can be selected. typically the shape of an i-beam. vertical-text the vertical text can be selected. typically the shape of a sideways i-beam. drag & drop alias an alias or shortcut is to be created. copy something is to be copied. move something is to be moved. no-drop an item may not be dropped at the current location. ...

env() - CSS: Cascading Style Sheets
for rectangular viewports, like your average laptop monitor, their value is equal to zero. for non-rectangular displays — like a round watch face — the four values set by the user agent form a rectangle such that all content inside the rectangle is visible. note: unlike other css properties, user agent-defined property names are case-sensitive. formal syntax...

drop-shadow() - CSS: Cascading Style Sheets
us a pull request. a drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image. note: this function is somewhat similar to the box-shadow property. the box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself. syntax drop-shadow(offset-x offset-y blur-radius color) the drop-shadow() function accepts a parameter of type <shadow> (defined in the box-shadow property), with the exception that the inset keyword and spread parameters are not allowed. parameters offset-x offset-y (required) two <length> values that determine the shadow offset. offset-x specifies t...

font-optical-sizing - CSS: Cascading Style Sheets
d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ font-optical-sizing: none; font-optical-sizing: auto; /* default */ /* global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: unset; values none the browser will not modify the shape of glyphs for optimal viewing. auto the browser will modify the shape of glyphs for optimal viewing. description optical sizing is enabled by default for fonts that have an optical size variation axis. the optical size variation axis is represented by opsz in font-variation-settings. when optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whe...

<image> - CSS: Cascading Style Sheets
if supported, the browser-defined size matching the usual cursor size on the client's system content for a pseudo-element (::after/::before) a 300px × 150px rectangle the concrete object size is calculated using the following algorithm: if the specified size defines both th...

list-style - CSS: Cascading Style Sheets
udes <li> elements. because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside. constituent properties this property is a shorthand for the following css properties: list-style-image list-style-position list-style-type syntax /* type */ list-style: square; /* image */ list-style: url('../img/shape.png'); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url('../img/shape.png') outside; /* keyword value */ list-style: none; /* global values */ list-style: inherit; list-style: initial; list-style: unset; the list-style property is specified as one, two, or three keywords in any order. if list-sty...

offset-distance - CSS: Cascading Style Sheets
to be placed. syntax /* default value */ offset-distance: 0; /* the middle of the offset-path */ offset-distance: 50%; /* a fixed length positioned along the path */ offset-distance: 40px; <length-percentage> a length that specifies how far the element is along the path (defined with offset-path). 100% represents the total length of the path (when the offset-path is defined as a basic shape or path()). formal definition initial value0applies totransformable elementsinheritednopercentagesrefer to the total path lengthcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples using offset-distance in an animation the motion aspec...

offset-rotate - CSS: Cascading Style Sheets
if auto is followed by an <angle>, the computed value of the angle is added to the computed value of auto. reverse the element is rotated similar to auto, except it faces the opposite direction. it is the same as specifying a value of auto 180deg. ...

text-emphasis-style - CSS: Cascading Style Sheets
tyle: filled; text-emphasis-style: open; text-emphasis-style: dot; text-emphasis-style: circle; text-emphasis-style: double-circle; text-emphasis-style: triangle; text-emphasis-style: filled sesame; text-emphasis-style: open sesame; /* global values */ text-emphasis-style: inherit; text-emphasis-style: initial; text-emphasis-style: unset; syntax values none no emphasis marks. filled the shape is filled with solid color. if neither filled nor open is present, this is the default. open the shape is hollow. dot display small circles as marks. the filled dot is '•' (u+2022), and the open dot is '◦' (u+25e6). circle display large circles as marks. the filled circle is '●' (u+25cf), and the open circle is '○' (u+25cb). double-circle display double circles as marks. the fille...

<transform-function> - CSS: Cascading Style Sheets
the vertical direction. translation (moving) translate() translates an element on the 2d plane. translate3d() translates an element in 3d space. translatex() translates an element horizontally. translatey() translates an element vertically. translatez() translates an element along the z-axis. description various coordinate models can be used to describe an html element's size and shape, as well as any transformations applied to it. the most common is the cartesian coordinate system, although homogeneous coordinates are also sometimes used. cartesian coordinates in the cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). this is represented by the vector notation (x, y). in css (and mos...

url() - CSS: Cascading Style Sheets
includes control characters above 0x7e. double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. the following are all valid and equivalent: <css_property>: url("https://example.com/image.png") <css_property>: url('https://example.com/image.png') <css_property>: url(https://example.com/image.png) path references the id of an svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path. <url-modifier> in the future, the url() function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the url string.this is not supported and not fully defined in the specification. formal syntax url( <string> <url-modifier>* ) exampl...

Graphics on the Web - Developer guides
the background of html elements using the background-image property. 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 we...

Printing - Developer guides
you wish to use different styles to enhance the appearance of your content on paper. you wish to use higher resolution images for a better result. you want to adjust the user experience of printing, such as presenting a specially-formatted version of your content before printing begins. ...

HTML attribute reference - HTML: Hypertext Markup Language
ll should span over. sandbox <iframe> stops a document loaded in an iframe from using certain features (such as submitting forms or opening new windows). scope <th> defines the cells that the header test (defined in the th element) relates to. scoped <style> selected <option> defines a value which will be selected on page load. shape <a>, <area> size <input>, <select> defines the width of the element (in pixels). if the element's type attribute is text or password then it's the number of characters. sizes <link>, <img>, <source> slot global attribute assigns a slot in a shadow dom shadow tree to an element. span <col>, <colgroup> spellcheck globa...

Cross-Origin Resource Sharing (CORS) - HTTP
ng standard can enable cross-site http requests for: invocations of the xmlhttprequest or fetch apis, as discussed above. web fonts (for cross-domain font usage in @font-face within css), so that servers can deploy truetype fonts that can only be cross-site loaded and used by web sites that are permitted to do so. webgl textures. images/video frames drawn to a canvas using drawimage(). css shapes from images. this article is a general discussion of cross-origin resource sharing and includes a discussion of the necessary http headers. functional overview the cross-origin resource sharing standard works by adding new http headers that let servers describe which origins are permitted to read that information from a web browser. additionally, for http request methods that can cause side-...

Web video codec guide - Web media technologies
media into an internal pixel format, or otherwise represents the image using a means other than simple pixels, the format of the original image doesn't make any difference. however, things such as frame rate and, obviously, resolution will always have an impact on the output size of the media. additionally, all codecs have their strengths and weaknesses. some have trouble with specific kinds of shapes and patterns, or aren't good at replicating sharp edges, or tend to lose detail in dark areas, or any number of possibilities. it all depends on the underlying algorithms and mathematics. the potential effect of source video format and contents on the encoded video quality and size feature effect on quality effect on size color depth (bit depth) the higher the co...

Graphic design for responsive sites - Progressive web apps (PWAs)
barrier for non-developers. svg svg, just like html/css, can be manipulated via javascript. so adding interactivity is not difficult. you can also add links direcly into svg and can create animations using smil (synchronized multimedia intergration language). webgl/canvas you can create a canvas to draw interactive graphics on using the html <canvas> element, then use the canvas api to create shapes, lines, import image files, create text, do compositing operations, and much more. standard javascript can then be used to animate the image output, etc. you can create 2d imagery using the regular 2d canvas context, or 3d imagery using the more nascent webgl api. canvas is very powerful, but it needs to be used with caution. it is good for the visuals of games and complex data visualisions, bu...

cx - SVG: Scalable Vector Graphics
> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape. value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for circles. ellipse for <ellipse>, cx defines the x-axis coordinate of the center of the shape. value <length-percentage> default value 0 animatable ...

cy - SVG: Scalable Vector Graphics
<radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for circles. ellipse for <ellipse>, cy defines the y-axis coordinate of the center of the shape. value <length> | <percentage> default value 0 anim...

direction - SVG: Scalable Vector Graphics
ses, such as when using right-to-left languages, it may be sufficient to add the direction attribute to the outermost <svg> element, and allow that direction to inherit to all text elements: note: as a presentation attribute, direction can be used as a css property. see css direction for further information. as a presentation attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: <altglyph>, <textpath>, <text>, <tref>, and <tspan>. html, body, svg { height: 100%; } <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl ...

marker-end - SVG: Scalable Vector Graphics
in this case, if the value of marker-start and marker-end are both not none, then two markers will be rendered on that final vertex. for <path> elements, for each closed subpath, the last vertex is the same as the first vertex. marker-end is only rendered on the final vertex of the path data. note: as a presentation attribute, marker-end can be used as a css property. ...

marker-mid - SVG: Scalable Vector Graphics
the marker is rendered on every vertex other than the first and last vertices of the path data. note: as a presentation attribute, marker-mid can be used as a css property. ...

marker-start - SVG: Scalable Vector Graphics
in this case, if the value of marker-start and marker-end are both not none, then two markers will be rendered on that final vertex. for <path> elements, for each closed subpath, the last vertex is the same as the first vertex. marker-start is only rendered on the first vertex of the path data. note: as a presentation attribute, marker-start can be used as a css property. ...

mask - SVG: Scalable Vector Graphics
ation attribute mask can be used as a css property. ...

paint-order - SVG: Scalable Vector Graphics
note: as a presentation attribute, paint-order can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following ten elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, and <tspan> usage notes value normal | [ fill || stroke || markers ] default value normal animatable yes normal this value indicates that the fill will be painted first, then the stroke, and finally the markers. ...

pathLength - SVG: Scalable Vector Graphics
otal length for the line, in user units. value <number> default value none animatable yes path for <path>, pathlength lets authors specify a total length for the path, in user units. value <number> default value none animatable yes polygon for <polygon>, pathlength lets authors specify a total length for the shape, in user units. value <number> default value none animatable yes polyline for <polyline>, pathlength lets authors specify a total length for the shape, in user units. value <number> default value none animatable yes rect for <rect>, pathlength lets authors specify a total length for the rectangle, in user un...

rx - SVG: Scalable Vector Graphics
ipse cx="50" cy="50" rx="0" ry="25" /> <ellipse cx="150" cy="50" rx="25" ry="25" /> <ellipse cx="250" cy="50" rx="50" ry="25" /> <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> </svg> ellipse for <ellipse>, rx defines the x-radius of the shape. with a value lower or equal to zero the ellipse won't be drawn at all. value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, rx is a geometry property meaning this attribute can also be used as a css property for ellipses. rect for <rect>, rx defines the x-axis radius of the ellipse used to round off the cor...

ry - SVG: Scalable Vector Graphics
ipse cx="50" cy="50" ry="0" rx="25" /> <ellipse cx="150" cy="50" ry="25" rx="25" /> <ellipse cx="250" cy="50" ry="50" rx="25" /> <rect x="20" y="120" width="60" height="60" ry="0" rx="15"/> <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> </svg> ellipse for <ellipse>, ry defines the y-radius of the shape. with a value lower or equal to zero the ellipse won't be drawn at all. value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, ry is a geometry property meaning this attribute can also be used as a css property for ellipses. rect for <rect>, ry defines the y-axis radius of the ellipse used to round off the cor...

spreadMethod - SVG: Scalable Vector Graphics
the spreadmethod attribute determines how a shape is filled beyond the defined edges of a gradient. two elements are using this attribute: <lineargradient> and <radialgradient> context notes value pad | reflect | repeat initial value pad animatable yes pad this value indicates that the final color of the gradient fills the shape beyond the gradient's edges. reflect this value indicates that the gradient repeats in reverse beyond its edges. repeat this value specifies that the gradient repeats in the original order beyond its edges. defining a gradient's edges by default, a gradient reaches to the edges of the shape being filled. to see the effects of this attribute, you will need to set the size of the gradient smaller than the shape. in...

vector-effect - SVG: Scalable Vector Graphics
, <polygon>, <polyline>, <rect>, <text>, <textpath> <tspan>, and <use> usage notes value none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position default value none animatable yes none this value specifies that no vector effect shall be applied, i.e. the default rendering behaviour is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint. non-scaling-stroke this value modifies the way an object is stroked. normally stroking involves calculating stroke outline of the shapeʼs path in current user 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 depen...

x - SVG: Scalable Vector Graphics
animatable yes pattern for <pattern>, x defines the x coordinate of the uper left corner of the tile pattern. the exact effect of this attribute is influenced by the patternunits and patterntransform attributes. value <length> default value 0 animatable yes rect for <rect>, x defines the x coordinate of the uper left corner of the shape. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, x is a geometry property meaning this attribute can also be used as a css property for rectangles. svg for <svg>, x defines the x coordinate of the uper left corner of its viewport. value <length> | <percentage> default value 0 an...

y - SVG: Scalable Vector Graphics
% animatable yes pattern for <pattern>, y defines the y coordinate of the uper left corner of the tile pattern. the exact effect of this attribute is influenced by the patternunits and patterntransform attributes. value <length> default value 0 animatable yes rect for <rect>, y defines the y coordinate of the uper left corner of the shape. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, y is a geometry property meaning this attribute can also be used as a css property for rectangles. svg for <svg>, y defines the y coordinate of the uper left corner of its viewport. value <length> | <percentage> default value 0 ani...

y1 - SVG: Scalable Vector Graphics
op values. the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the shape it is applied to. --> <lineargradient y1="0%" id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at the bottom left corner of the bounding box of the shape it is applied to. -...

y2 - SVG: Scalable Vector Graphics
top values. the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the shape it is applied to. --> <lineargradient y2="0%" id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector end at the bottom right corner of the bounding box of the shape it is applied to. --...

<altGlyph> - SVG: Scalable Vector Graphics
specifications s...

<clipPath> - SVG: Scalable Vector Graphics
lue type: userspaceonuse|objectboundingbox ; default value: userspaceonuse; animatable: yes global attributes core attributes most notably: id styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<text>, <use> specifications specification status comment ...

<cursor> - SVG: Scalable Vector Graphics
hot spot). the png format is recommended because it supports the ability to define a transparency mask via an alpha channel. if a different image format is used, this format should support the definition of a transparency mask (two options: provide an explicit alpha channel or use a particular pixel color to indicate transparency). if the transparency mask can be determined, the mask defines the shape of the cursor; otherwise, the cursor is an opaque rectangle. typically, the other pixel information (e.g., the r, g and b channels) defines the colors for those parts of the cursor which are not masked out. note that cursors usually contain at least two colors so that the cursor can be visible over most backgrounds. usage context categoriesnonepermitted contentany number of the following elemen...

<defs> - SVG: Scalable Vector Graphics
utes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <...

<feComposite> - SVG: Scalable Vector Graphics
525,25)" xlink:href="#twobluetriangles"/> <use transform="translate(650,25)" xlink:href="#twobluetriangles"/> <use transform="translate(775,25)" xlink:href="#twobluetriangles"/> <use transform="translate(900,25)" xlink:href="#twobluetriangles"/> </g> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/> <g font-family="verdana" font-size="40" shape-rendering="crispedges"> <desc>render the examples using the filters that draw on top of an opaque white surface, thus obliterating the background.</desc> <g enable-background="new"> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-size="27">(with feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="27">(w...

<foreignObject> - SVG: Scalable Vector Graphics
processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...

<glyph> - SVG: Scalable Vector Graphics
a <glyph> defines a single glyph in an svg font. usage context categoriestext content elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface. example svg <svg width="400px" height="300px" version="1.1" ...

<missing-glyph> - SVG: Scalable Vector Graphics
the <missing-glyph> svg element's content is rendered, if for a given character the font doesn't define an appropriate <glyph>. usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the svgmissingglyphelement interface. specifications specification status...

<pattern> - SVG: Scalable Vector Graphics
0; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elemen...

<switch> - SVG: Scalable Vector Graphics
also processed/rendered or bypassed/not rendered. the display and visibility properties have no effect on <switch> element processing. in particular, setting display:none on a child has no effect on the true/false testing for <switch> processing. usage context categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<a>, <foreignobject>, <g>, <image>, <svg>, <switch>, <text>, <use> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes class style externalresourcesrequired transform dom interface this element implements the svgswitchelement interface. svg <switch> example this example demonstrates showing diff...

<text> - SVG: Scalable Vector Graphics
yle, font-variant, font-weight conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-dis...

<tspan> - SVG: Scalable Vector Graphics
yling 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-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-dis...

<use> - SVG: Scalable Vector Graphics
y: 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-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-d...

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
d. doesn't completely follow <svg:use> cascading rules (bug 265894). doesn't deliver events to a svgelementinstance tree (bug 265895). conditional processing module switch implemented. image module image implemented. style module style implemented. shape module path implemented. svgpathelement interface unimplemented attributes: normalizedpathseglist, animatednormalizedpathseglist rect implemented. circle implemented. line implemented. ellipse implemented. ...

Filter effects - SVG: Scalable Vector Graphics
drop shadows, to provide a popular example, cannot be created reasonably with a combination of gradients. filters are svg's mechanism to create sophisticated effects. a basic example is to add a blur effect to svg content. while basic blurs can be achieved with the help of gradients, the blur filter is needed to do anything beyond. example filters are defined by <filter> element, which should be put in the <defs> section of your svg file. ...

Gradients in SVG - SVG: Scalable Vector Graphics
« previousnext » perhaps more exciting than just fills and strokes is the fact that you can also create and apply gradients as either fills or strokes. there are two types of gradients: linear and radial. you must give the gradient an id attribute; otherwise it can't be referenced by other elements inside the file. gradients are defined in a defs section as opposed to on a shape itself to promote reusability. linear gradient linear gradients change along a straight line. to insert one, you create a <lineargradient> node inside the definitions section of your svg file. basic example <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop class="stop1" offset="0%"/> <stop class="st...

SVG In HTML Introduction - SVG: Scalable Vector Graphics
<rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript. the only interesting part is the <svg> element it contains. this element and its children are declared to be in the svg namespace. the element contains a gradient and two shapes filled with the gradient. the gradient color stops have their colors set by css. when the user enters something incorrect into the form, the script sets the invalid attribute on the <body>, and a style rule changes the gradient end-stop color to red. (another style rule makes an error message appear.) this approach has the following points in its favor: we have taken a regular html form that...

SVG fonts - SVG: Scalable Vector Graphics
ssing-glyph> element. this defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. it also shows how glyphs are created: by simply adding any graphical svg content inside. you can use literally any other svg elements in here, even <filter>, <a> or <script>. for simple glyphs, however, you can simply add a d attribute — this defines a shape for the glyph exactly like how standard svg paths work. the actual glyphs are then defined by <glyph> elements. the most important attribute is unicode. it defines the unicode codepoint represented by this glyph. if you also specify the lang attribute on a glyph, you can further restrict it to certain languages (represented by xml:lang on the target) exclusively. again, you can use arbitrary svg...

Texts - SVG: Scalable Vector Graphics
be used to put arbitrary text in svg documents: <text x="10" y="10">hello world!</text> the x and y attributes determine, where in the viewport the text will appear. the attribute text-anchor, which can have the values "start", "middle", "end" or "inherit", decides in which direction the text flows from this point. the attribute dominant-baseline decides the vertical alignment. like with the shape elements text can be colorized with the fill attribute and given a stroke with the stroke attribute. both may also refer to gradients or patterns, which makes simple coloring text in svg very powerful compared to css 2.1. setting font properties an essential part of a text is the font in which it is displayed. svg offers a set of attributes, many similar to their css counterparts, to enable fon...

SVG Tutorial - SVG: Scalable Vector Graphics
images, you might find more useful resources at inkscape's documentation page. another good introduction to svg is provided by the w3c's svg primer. the tutorial is in an early stage of development. if you're able, please help out by chipping in and writing a paragraph or two. extra points for writing a whole page! introducing svg from scratch introduction getting started positions basic shapes paths fills and strokes gradients patterns texts basic transformations clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and css the following topics are more advanced and hence should get their own tutorials. scripting svg with javascript tbd svg filters tutorial tbd animations with smil in svg tbd creating fonts in svg tbd...

How to fix a website with blocked mixed content - Web security
ges on your website with the web console open (enable the "security" messages) and see if anything related to mixed content is reported. or use a free online crawler like ssl-check or missing padlock, a desktop crawler like httpschecker, or a cli tool like mcdetect to check your website recursively and find links to insecure content. if nothing is said about mixed content, your website is in good shape: keep making excellent websites! how to fix your website the best strategy to avoid mixed content blocking is to serve all the content as https instead of http. for your own domain, serve all content as https and fix your links. often, the https version of the content already exists and this just requires adding an "s" to links - http:// to https://. however, in some cases, the path may just...

Web technology for developers
he web's powerful scriptability, 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 ...