Search completed in 1.18 seconds.
Key Values - Web APIs
vk_tab (0x09) kvk_tab (0x
30) gdk_key_tab (0xff09) gdk_key_kp_tab (0xff89) gdk_key_iso_left_tab (0xfe20) qt::key_tab (0x01000001) keycode_tab (61) " " [1] the space key, space bar.
... vk_oem_attn (0xf0) gdk_key_eisu_shift (0xff2f) gdk_key_eisu_toggle (0xff
30) qt::key_eisu_shift (0x0100112f) qt::key_eisu_toggle (0x010011
30) "codeinput" the code input key, which enables code input mode, which lets the user enter characters by typing their code points (their unicode character numbers, typically).
... kvk_jis_eisu (0x66) gdk_key_eisu_toggle (0xff2f) qt::key_eisu_toggle (0x010011
30) keycode_eisu (212) "hankaku" [3] the hankaku (half-width characters) key.
...And 4 more matches
JavaScript Daemons Management - Archive of obsolete content
sample usage: var mydaemon = daemon.buildaround({ "create": function () { [custom code] }, // optional "prepare": function () { [custom code] }, // optional "perform": function () { [custom code] }, // required "customproperty": [custom value], "mycustommethod": function () { [custom code] }, "anothercustomproperty": [custom value], "etc.": "etc." }, 200,
30); daemon.incorporate(function) the function.prototype property will replaced with a new daemon() object.
... "customproperty": [custom value], |*| "mycustommethod": function () { [custom code] }, |*| "anothercustomproperty": [custom value], |*| "etc.": "etc." |*| "create": function () { [custom code] }, // optional |*| "prepare": function () { [custom code] }, // optional |*| "perform": function () { [custom code] }, // required |*| }, 200,
30); |*| \*/ var stext = "do you feel lucky, punk?", ounhide = daemon.buildaround({ // http://tyleregeto.com/text-animation-in-javascript "letters": [], "numletters": 0, "clock": 0, "interval": 0.0, "delta": 33, "letters": [], "pool": ["0","1","2","3","4","5","6","7","8","9"], "target": document.createelement("p"), "create": function () { // build letters list this.targ...
... oletter.val : this.pool[parseint(math.random() * this.pool.length)]; } } }, 33,
30); onload = function () { ounhide.owner.target.id = "animate-me"; document.body.appendchild(ounhide.owner.target); ounhide.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>daemon.buildaround()</h1> <p><...
...And 2 more matches
CanvasRenderingContext2D.arcTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // tangential lines ctx.beginpath(); ctx.strokestyle = 'gray'; ctx.moveto(200, 20); ctx.lineto(200, 1
30); ctx.lineto(50, 20); ctx.stroke(); // arc ctx.beginpath(); ctx.strokestyle = 'black'; ctx.linewidth = 5; ctx.moveto(200, 20); ctx.arcto(200,130, 50,20, 40); ctx.stroke(); // start point ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.arc(200, 20, 5, 0, 2 * math.pi); ctx.fill(); // control points ctx.beginpath(); ctx.fillstyle = 'red'; ctx.arc(200, 130, 5, 0, 2 * math.pi); // control point one ctx...
...it is shaped to fit control points at (90, 1
30) and (20, 20), and has a radius of 50.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(180, 90); ctx.arcto(180,130, 110,130, 1
30); ctx.lineto(110, 1
30); ctx.stroke(); result live demo more sophisticated demo of the method.
Applying styles and colors - Web APIs
.addcolorstop(0.5, '#fff'); lingrad.addcolorstop(0.5, '#26c000'); lingrad.addcolorstop(1, '#fff'); var lingrad2 = ctx.createlineargradient(0, 50, 0, 95); lingrad2.addcolorstop(0.5, '#000'); lingrad2.addcolorstop(1, 'rgba(0, 0, 0, 0)'); // assign gradients to fill and stroke styles ctx.fillstyle = lingrad; ctx.strokestyle = lingrad2; // draw shapes ctx.fillrect(10, 10, 130, 1
30); ctx.strokerect(50, 50, 50, 50); } <canvas id="canvas" width="150" height="150"></canvas> draw(); the first is a background gradient.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // create gradients var radgrad = ctx.createradialgradient(45, 45, 10, 52, 50,
30); radgrad.addcolorstop(0, '#a7d30c'); radgrad.addcolorstop(0.9, '#019f62'); radgrad.addcolorstop(1, 'rgba(1, 159, 98, 0)'); var radgrad2 = ctx.createradialgradient(105, 105, 20, 112, 120, 50); radgrad2.addcolorstop(0, '#ff5f98'); radgrad2.addcolorstop(0.75, '#ff0188'); radgrad2.addcolorstop(1, 'rgba(255, 1, 136, 0)'); var radgrad3 = ctx.createradialgradient(95, 15, 15, 102, 20, 4...
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.shadowoffsetx = 2; ctx.shadowoffsety = 2; ctx.shadowblur = 2; ctx.shadowcolor = 'rgba(0, 0, 0, 0.5)'; ctx.font = '20px times new roman'; ctx.fillstyle = 'black'; ctx.filltext('sample string', 5,
30); } <canvas id="canvas" width="150" height="80"></canvas> draw(); screenshotlive sample we will look at the font property and filltext method in the next chapter about drawing text.
Basic animations - Web APIs
for (var i = 0; i < 12; i++) { ctx.beginpath(); ctx.rotate(math.pi / 6); ctx.moveto(100, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.restore(); // minute marks ctx.save(); ctx.linewidth = 5; for (i = 0; i < 60; i++) { if (i % 5!= 0) { ctx.beginpath(); ctx.moveto(117, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.rotate(math.pi /
30); } ctx.restore(); var sec = now.getseconds(); var min = now.getminutes(); var hr = now.gethours(); hr = hr >= 12 ?
... hr - 12 : hr; ctx.fillstyle = 'black'; // write hours ctx.save(); ctx.rotate(hr * (math.pi / 6) + (math.pi / 360) * min + (math.pi / 21600) *sec); ctx.linewidth = 14; ctx.beginpath(); ctx.moveto(-20, 0); ctx.lineto(80, 0); ctx.stroke(); ctx.restore(); // write minutes ctx.save(); ctx.rotate((math.pi /
30) * min + (math.pi / 1800) * sec); ctx.linewidth = 10; ctx.beginpath(); ctx.moveto(-28, 0); ctx.lineto(112, 0); ctx.stroke(); ctx.restore(); // write seconds ctx.save(); ctx.rotate(sec * math.pi /
30); ctx.strokestyle = '#d40000'; ctx.fillstyle = '#d40000'; ctx.linewidth = 6; ctx.beginpath(); ctx.moveto(-30, 0); ctx.lineto(83, 0); ctx.stroke(); ctx.beginpath(); ctx.arc(0, 0, 10, 0, math.pi * 2, true); ctx.fill(); ctx.beginp...
... gc() { for (var t = "0123456789abcdef", e = "#", i = 0; i < 6; i++) e += t[math.ceil(15 * math.random())]; return e } function food() { this.x = 0, this.y = 0, this.b = 10, this.w = this.b, this.h = this.b, this.color = gc(), this.renew = function () { this.x = math.floor(math.random() * (w - 200) + 10), this.y = math.floor(math.random() * (h - 200) +
30), this.color = gc() }, this.renew(), this.put = (() => { c.fillstyle = this.color, c.arc(this.x, this.y, this.b - 5, 0, 2 * math.pi), c.fill(), c.beginpath(), c.arc(this.x, this.y, this.b - 5, 0, math.pi), c.strokestyle = "green", c.linewidth = 10, c.stroke(), c.beginpath(), c.linewidth = 1 }) } function init() { cc.height = h, cc.width = w, c.fillrect(...
JavaScript Debugger Service - Archive of obsolete content
obsolete since gecko 33 (firefox 33 / thunderbird 33 / seamonkey 2.
30) this feature is obsolete.
... in firefox versions prior to gecko 33 (firefox 33 / thunderbird 33 / seamonkey 2.
30), the javascript debugger service (or simply jsd) used to be an xpcom component that allows the tracking of javascript while it was being executed in the browser.
StringView - Archive of obsolete content
/* (npart - 252 <<
30) may be not safe in ecmascript!
...dx++] = 0x80 /* 128 */ + ((nchar >>> 18) & 0x3f /* 63 */); atarget[nidx++] = 0x80 /* 128 */ + ((nchar >>> 12) & 0x3f /* 63 */); atarget[nidx++] = 0x80 /* 128 */ + ((nchar >>> 6) & 0x3f /* 63 */); atarget[nidx++] = 0x80 /* 128 */ + (nchar & 0x3f /* 63 */); } else /* if (nchar <= 0x7fffffff) */ { /* 2147483647 */ /* six bytes */ atarget[nidx++] = 0xfc /* 252 */ + /* (nchar >>>
30) may be not safe in ecmascript!
Mozilla Quirks Mode Behavior
obsolete since gecko 35 (firefox 35.0 / thunderbird 35.0 / seamonkey 2.32) (bug 955
30) this quirk is now html5 conform and has been adopted in standards mode.
... the scrollleft, scrolltop, scrollwidth, and scrollheight properties are relative to body in quirks mode (instead of html) (bug 2110
30).
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript the curve begins at the point specified by moveto(): (30,
30).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30,
30); ctx.beziercurveto(120,160, 180,10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30,
30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code...
..." class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30,
30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standa...
Compositing example - Web APIs
tx.arc(100, 200, 100, math.pi*2, 0, false); ctx.fill() ctx.beginpath(); ctx.fillstyle = "rgba(0,0,255,1)"; ctx.arc(220, 200, 100, math.pi*2, 0, false); ctx.fill() ctx.beginpath(); ctx.fillstyle = "rgba(0,255,0,1)"; ctx.arc(160, 100, 100, math.pi*2, 0, false); ctx.fill(); ctx.restore(); ctx.beginpath(); ctx.fillstyle = "#f00"; ctx.fillrect(0,0,30,
30) ctx.fill(); }; var colorsphere = function(element) { var ctx = canvas1.getcontext("2d"); var width = 360; var halfwidth = width / 2; var rotate = (1 / 360) * math.pi * 2; // per degree var offset = 0; // scrollbar offset var oleft = -20; var otop = -20; for (var n = 0; n <= 359; n ++) { var gradient = ctx.createlineargradient(oleft + halfwidth, otop, ...
...op); ctx.lineto(oleft + halfwidth, otop + halfwidth); ctx.lineto(oleft + halfwidth + 6, otop); ctx.fillstyle = gradient; ctx.fill(); ctx.translate(oleft + halfwidth, otop + halfwidth); ctx.rotate(rotate); ctx.translate(-(oleft + halfwidth), -(otop + halfwidth)); } ctx.beginpath(); ctx.fillstyle = "#00f"; ctx.fillrect(15,15,30,
30) ctx.fill(); return ctx.canvas; }; // hsv (1978) = h: hue / s: saturation / v: value color = {}; color.hsv_rgb = function (o) { var h = o.h / 360, s = o.s / 100, v = o.v / 100, r, g, b; var a, b, c, d; if (s == 0) { r = g = b = math.round(v * 255); } else { if (h >= 1) h = 0; h = 6 * h; d = h - math.floor(h); ...
Examples of web and XML development using the DOM - Web APIs
t-daddy" onclick="alert('hi');"> <tr id="tbl1"> <td id="c1">one</td> </tr> <tr> <td id="c2">two</td> </tr> </table> </body> </html> example 6: getcomputedstyle this example demonstrates how the window.getcomputedstyle method can be used to get the styles of an element that are not set using the style attribute or with javascript (e.g., elt.style.backgroundcolor="rgb(173, 216, 2
30)").
...le = document.defaultview.getcomputedstyle(refdiv, null).getpropertyvalue("width"); txtwidth.value = w_style; var txtbackgroundcolor = document.getelementbyid("t3"); var b_style = document.defaultview.getcomputedstyle(refdiv, null).getpropertyvalue("background-color"); txtbackgroundcolor.value = b_style; } </script> <style> #d1 { margin-left: 10px; background-color: rgb(173, 216, 2
30); height: 20px; max-width: 20px; } </style> </head> <body> <div id="d1"> </div> <form action=""> <p> <button type="button" onclick="cstyles();">getcomputedstyle</button> height<input id="t1" type="text" value="1" /> max-width<input id="t2" type="text" value="2" /> bg-color<input id="t3" type="text" value="3" /> </p> </form> </body> </html> example 7: displaying ...
async function expression - JavaScript
examples simple example function resolveafter2seconds(x) { return new promise(resolve => { settimeout(() => { resolve(x); }, 2000); }); }; const add = async function(x) { // async function expression assigned to a variable let a = await resolveafter2seconds(20); let b = await resolveafter2seconds(
30); return x + a + b; }; add(10).then(v => { console.log(v); // prints 60 after 4 seconds.
... }); (async function(x) { // async function expression used as an iife let p_a = resolveafter2seconds(20); let p_b = resolveafter2seconds(
30); return x + await p_a + await p_b; })(10).then(v => { console.log(v); // prints 60 after 2 seconds.
transform - SVG: Scalable Vector Graphics
example html,body,svg { height:100% } <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="-3" y="-3" width="6" height="6" /> <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewx(
30)" /> </svg> skewy the skewy(<a>) transform function specifies a skew transformation along the y axis by a degrees.
... example html,body,svg { height:100% } <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="-3" y="-3" width="6" height="6" /> <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewy(
30)" /> </svg> specification specification status comment css transforms level 2the definition of 'transform' in that specification.
lang/functional - Archive of obsolete content
let { chain } = require("sdk/lang/functional"); function person (age) { this.age = age; } person.prototype.happybirthday = chain(function () this.age++); let person = new person(
30); person .happybirthday() .happybirthday() .happybirthday() console.log(person.age); // 33 parameters fn : function the function that will be wrapped by the chain function.
Object.prototype.watch() - Archive of obsolete content
class person { constructor(name, age) { this.watch('age', this._isvalidassignment.bind(this)); this.watch('name', this._isvalidassignment.bind(this)); this.name = name; this.age = age; } tostring() { return this.name + ', ' + this.age; } _isvalidassignment(id, oldval, newval) { if (id === 'name' && (!newval || newval.length >
30)) { throw new rangeerror('invalid name for ' + this); } if (id === 'age' && (newval < 0 || newval > 200)) { throw new rangeerror('invalid age for ' + this); } return newval; } } const will = new person('will', 29); console.log(will); // will, 29 try { will.name = ''; } catch (e) { console.log(e); } try { will.age = -4; } catch (e) { console.log(e); } t...
Building up a basic demo with PlayCanvas editor - Game development
add the following line inside this function, to rotate the cube on every frame: this.entity.rotate(dt*10, dt*20, dt*
30); in the line above this.entity refers to the object to which the script will be attached (the box); using the dt variable, which contains the delta time passed since the previous frame, we can rotate the box by a different amount around all three axes.
Building up a basic demo with the PlayCanvas engine - Game development
add this line of code inside the app.on("update") callback function, right after the addition of the deltatime to the timer variable: box.rotate(deltatime*10, deltatime*20, deltatime*
30); it will rotate the box by deltatime*10 on the x axis, deltatime*20 on the y axis and deltatime*30 on the z axis, on very frame — giving us a smooth animation.
Error codes returned by Mozilla APIs
or_xpc_cant_get_jsobject_of_dom_object (0x8057002a) ns_error_xpc_cant_set_read_only_constant (0x8057002b) ns_error_xpc_cant_set_read_only_attribute (0x8057002c) ns_error_xpc_cant_set_read_only_method (0x8057002d) ns_error_xpc_cant_add_prop_to_wrapped_native (0x8057002e) ns_error_xpc_call_to_scriptable_failed (0x8057002f) ns_error_xpc_jsobject_has_no_function_named (0x805700
30) ns_error_xpc_bad_id_string (0x80570031) ns_error_xpc_bad_initializer_name (0x80570032) ns_error_xpc_has_been_shutdown (0x80570033) ns_error_xpc_cant_modify_prop_on_wn (0x80570034) ns_error_xpc_bad_convert_js_zero_isnot_null (0x80570035) ns_error_xpc_com_unknown (0x80570036) ns_error_xpc_com_error (0x80570037) ns_error_xpc_com_invalid_class_id (0x80570038) ns_er...
Gecko Keypress Event
e.g., ctrl+shift+'2' on persian keyboard layout inputs a zwnj, though shift+'2' inputs '@', and so, if gecko were to replace the charcode in this case, users would not be able to input zwnj (bug 4141
30).
Localizing with Koala
due to a bug in koala (bug 219
30), it is recommended that you don't choose a path that contains spaces (like c:\documents and settings\user\...).
Extras
6 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-
30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <msup> <mi>α</mi> <mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </mfrac> </mrow> </math> </foreignobject> <text>exp(�...
Secure Development Guidelines
memory leaks example: void *p; size_t new_size; p = realloc(p, new_size); if (p == null) { /* handle error */ } memory leaks: prevention tools like valgrind can help detect memory leaks writing secure code: object management reference counting issues real-life example (bug 4402
30) void addref() { ++mrefcnt; ns_log_addref(this, mrefcnt, "nscssvalue::array", sizeof(*this)); } void release() { --mrefcnt; ns_log_release(this, mrefcnt, "nscssvalue::array"); if (mrefcnt == 0) delete this; } reference counting issues: prevention use the largest data type available on your platform for your reference counter use a hard limit construc...
nsIRegistry
try { st.first(); do { var data = st.currentitem(); if( data instanceof ci.nsiregistrynode ) print("nsiregistrynode: " + data.nameutf8 + " (" + data.key + ")"); st.next(); } while( components.lastresult == 0 ); } catch(e) {} now, the output is something like: profiles (344) profiles/default (5
30) profiles/foo (1046) profiles/bar (1518) the number inside the parenthesis is the "key." you can use this key with the rest of the nsiregistry api (see mxr).
nsIAccessible
[scriptable, uuid=(c7520419-87ec-42bc-98cc-04c0bf1735
30)] interface nsiaccessible : nsisupports { ...
nsIMsgCompFields
(bug 2495
30) newsgroups astring newshost char * newsposturl char * organization astring otherrandomheaders astring no longer exists - see https://groups.google.com/forum/#!topic/mozilla.dev.apps.thunderbird/s4ofmm8_b28 priority char * receiptheadertype print32 references char * ...
ctypes
for example, ctypes.char.array(
30)(str) converts the string str to utf-8 and returns a new cdata object of array type.
CanvasRenderingContext2D.clearRect() - Web APIs
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, 20); ctx.lineto(130, 1
30); ctx.closepath(); ctx.fill(); // clear part of the canvas ctx.clearrect(10, 10, 120, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clearrect' in that specification.
CanvasRenderingContext2D.clip() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 1
30); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification.
CanvasRenderingContext2D.direction - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hi!', 150, 50); ctx.direction = 'rtl'; ctx.filltext('hi!', 150, 1
30); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.direction' in that specification.
CanvasRenderingContext2D.fill() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create path let region = new path2d(); region.moveto(30, 90); region.lineto(110, 20); region.lineto(240, 1
30); region.lineto(60, 1
30); region.lineto(190, 20); region.lineto(270, 90); region.closepath(); // fill path ctx.fillstyle = 'green'; ctx.fill(region, 'evenodd'); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fill' in that specification.
CanvasRenderingContext2D.lineTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.moveto(90, 1
30); ctx.lineto(95, 25); ctx.lineto(150, 80); ctx.lineto(205, 25); ctx.lineto(210, 1
30); ctx.linewidth = 15; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.lineto' in that specification.
CanvasRenderingContext2D.lineWidth - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 15; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(130, 1
30); ctx.rect(40, 40, 70, 70); ctx.stroke(); result more examples for more examples and explanation about this property, see applying styles and color in the canvas tutorial.
CanvasRenderingContext2D.resetTransform() - Web APIs
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.
CanvasRenderingContext2D.rotate() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140,
30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140,
30); result the non-rotated rectangle is gray, and the rotated rectangle is red.
CanvasRenderingContext2D.textAlign - Web APIs
ementbyid('canvas'); canvas.width = 350; const ctx = canvas.getcontext('2d'); const x = canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 1
30); result direction-dependent text alignment this example demonstrates the two direction-dependent values of the textalign property: "start" and "end".
CanvasRenderingContext2D.translate() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // moved square ctx.translate(110,
30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80); result the moved square is red, and the unmoved square is gray.
Transformations - Web APIs
e the current state ctx.fillstyle = '#fff'; // make changes to the settings ctx.globalalpha = 0.5; ctx.fillrect(30, 30, 90, 90); // draw a rectangle with new settings ctx.restore(); // restore previous state ctx.fillrect(45, 45, 60, 60); // draw a rectangle with restored settings ctx.restore(); // restore original state ctx.fillrect(60, 60, 30,
30); // draw a rectangle with restored settings } <canvas id="canvas" width="150" height="150"></canvas> draw(); the first step is to draw a large rectangle with the default settings.
Index - Web APIs
the size includes the response header fields plus the response payload body (as defined by rfc72
30).
KeyboardEvent: code values - Web APIs
kvk_ansi_semicolon (0x29) "semicolon" "semicolon" kvk_ansi_backslash (0x2a) "backslash" "backslash" kvk_ansi_comma (0x2b) "comma" "comma" kvk_ansi_slash (0x2c) "slash" "slash" kvk_ansi_n (0x2d) "keyn" "keyn" kvk_ansi_m (0x2e) "keym" "keym" kvk_ansi_period (0x2f) "period" "period" kvk_tab (0x
30) "tab" "tab" kvk_space (0x31) "space" "space" kvk_ansi_grave (0x32) "backquote" "backquote" kvk_delete (0x33) "backspace" "backspace" enter key on keypad of powerbook (0x34) "numpadenter" "" kvk_escape (0x35) "escape" "escape" right-command key (0x36) "osright" "osright" kvk_command (0x37) "...
SVGGeometryElement.isPointInFill() - Web APIs
white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinfill(new dompoint(10, 10))); // point in circle console.log('point at 40,30:', circle.ispointinfill(new dompoint(40,
30))); result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinfill()' in that specification.
SVGGeometryElement.isPointInStroke() - Web APIs
r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> <circle cx="83" cy="17" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinstroke(new dompoint(10, 10))); // point in circle but not stroke console.log('point at 40,30:', circle.ispointinstroke(new dompoint(40,
30))); // point in circle stroke console.log('point at 83,17:', circle.ispointinstroke(new dompoint(83, 17))); result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinstroke()' in that specification.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
// connect to host:port failed case 0x804b000c: // ns_error_connection_refused, network(13) errname = 'connectionrefusederror'; break; // network timeout error case 0x804b000e: // ns_error_net_timeout, network(14) errname = 'networktimeouterror'; break; // hostname lookup failed case 0x804b001e: // ns_error_unknown_host, network(
30) errname = 'domainnotfounderror'; break; case 0x804b0047: // ns_error_net_interrupt, network(71) errname = 'networkinterrupterror'; break; default: errname = 'networkerror'; break; } } // xxx we have no tcperror implementation right now because it's really hard to // do on b2g18.
white-space - CSS: Cascading Style Sheets
excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> .box { width: 300px; padding: 16px; border-radius: 10px; } #css-code { background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; } #css-code select { font-family: inherit; } #results { background-color: rgb(230, 230, 2
30); overflow-x: scroll; height: 400px; white-space: normal; font-size: 14px; } var select = document.queryselector("#css-code select"); var results = document.queryselector("#results p"); select.addeventlistener("change", function(e) { results.setattribute("style", "white-space: "+e.target.value); }) <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inc...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
.boxleft { float: left; background-color: rgb(245, 130, 1
30); outline: 2px solid darkred; } the .boxleft class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors: the box's background color is set by changing the value of the css background-color property to rgb(245, 130, 1
30).
<input type="datetime-local"> - HTML: Hypertext Markup Language
ith a date/time input, you could provide a means of inputting a timezone, such as a <select> element: <select name="timezone_offset" id="timezone-offset" class="span5"> <option value="-12:00">(gmt -12:00) eniwetok, kwajalein</option> <option value="-11:00">(gmt -11:00) midway island, samoa</option> <option value="-10:00">(gmt -10:00) hawaii</option> <option value="-09:50">(gmt -9:
30) taiohae</option> <option value="-09:00">(gmt -9:00) alaska</option> <option value="-08:00">(gmt -8:00) pacific time (us & canada)</option> ...
Proxy Auto-Configuration (PAC) file - HTTP
examples timerange(12); // returns true from noon to 1pm timerange(12, 13); // returns true from noon to 1pm timerange(12, "gmt"); // returns true from noon to 1pm, in gmt timezone timerange(9, 17); // returns true from 9am to 5pm timerange(8, 30, 17, 00); // returns true from 8:30am to 5:00pm timerange(0, 0, 0, 0, 0,
30); // returns true between midnight and 30 seconds past midnight example 1 use proxy for everything except local hosts note: since all of the examples that follow are very specific, they have not been tested.
Date.prototype.setSeconds() - JavaScript
examples using setseconds() var thebigday = new date(); thebigday.setseconds(
30); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.setseconds' in that specification.
String.prototype.slice() - JavaScript
str2 = str1.slice(1, 8), str3 = str1.slice(4, -2), str4 = str1.slice(12), str5 = str1.slice(
30); console.log(str2) // output: he morn console.log(str3) // output: morning is upon u console.log(str4) // output: is upon us.
TypedArray - JavaScript
42; console.log(int16[0]); // 42 // indexed properties on prototypes are not consulted (fx 25) int8array.prototype[20] = 'foo'; (new int8array(32))[20]; // 0 // even when out of bound int8array.prototype[20] = 'foo'; (new int8array(8))[20]; // undefined // or with negative integers int8array.prototype[-1] = 'foo'; (new int8array(8))[-1]; // undefined // named properties are allowed, though (fx
30) int8array.prototype.foo = 'bar'; (new int8array(32)).foo; // "bar" specifications specification ecmascript (ecma-262)the definition of 'typedarray objects' in that specification.