Window : Global

Window is the global object in the browser that represents the
browser window for the page.  The window object itself
is available through the %%#window|**window**%% property and all
properties on the Window are available directly in scripts.
The Window object is also available as **this** in the root scope of
a script (ie, outside of any %%/Function|Function%%).

Spec:
https://html.spec.whatwg.org/#the-window-object

----
instance.frameElement : Element

ReadOnly:
true

----
instance.frames : Window

ReadOnly:
true

----
instance.length : Number

ReadOnly:
true

----
instance.opener : Window

----
instance.pageXOffset : Number

ReadOnly:
true

Spec:
https://drafts.csswg.org/cssom-view-1/#dom-window-pagexoffset

----
instance.pageYOffset : Number

ReadOnly:
true

Spec:
https://drafts.csswg.org/cssom-view-1/#dom-window-pageyoffset

----
instance.parent : Window


ReadOnly:
true

----
instance.scrollX : Number

ReadOnly:
true

Spec:
https://drafts.csswg.org/cssom-view-1/#dom-window-scrollx

----
instance.scrollY : Number

ReadOnly:
true

Spec:
https://drafts.csswg.org/cssom-view-1/#dom-window-scrolly

----
instance.top : Window

ReadOnly:
true

----
instance.globalThis : Window

Returns the global object for the browser. Also available through 
the %%#window|**window**%% property, %%#self|**self**%% property,
and **this** in the root scope.

<htmlexample>
<script>
  console.log(globalThis === this);
  console.log(globalThis === window);
  console.log(globalThis === self);
  console.log(globalThis === globalThis.globalThis);

  const myLink = {
    location: 'my-link-location',
    click() {
      console.log(`this.location: ${this.location}`);
      console.log(`globalThis.location: ${globalThis.location}`);
    }
  };

  myLink.click();
</script>
</htmlexample>

ReadOnly:
true

Version:
ECMAScript 2020

----
instance.window : Window

Returns the global object for the browser. Also available
through the %%#self|**self**%% property, through **this**
in the root scope, and through the %%#globalThis|**globalThis**%%
property (in ECMAScript 2020).

<htmlexample>
<script>
  // At the root scope, 'this' is the window.
  console.log(this === window);
  console.log(window === self);
  console.log(window === window.window);
  console.log(window === window.self);
</script>
</htmlexample>

ReadOnly:
true

Spec:
https://html.spec.whatwg.org/#dom-window

----
instance.self : Window

Returns the global object for the browser. Also available
through the %%#window|**window**%% property and through **this**
in the root scope.

<htmlexample>
<script>
  // At the root scope, 'this' is the window.
  console.log(this === window);
  console.log(window === self);
  console.log(window === window.window);
  console.log(window === window.self);
</script>
</htmlexample>

ReadOnly:
true

Spec:
https://html.spec.whatwg.org/#dom-self

----
instance.crypto : Crypto

Spec:
http://www.w3.org/TR/WebCryptoAPI/#dfn-Crypto

----
instance.customElements : CustomElementRegistry

Provides a way to extend HTML/DOM with your own elements that
have custom logic similar to built in elements. See also
%%/CustomElementPrototype|CustomElementPrototype%%.

<htmlexample>
<style>
  my-element { 
    border: 1px solid green;
  }
</style>

<my-element>MyElement from HTML</my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();

      // Hook up click listener to set the color to red
      this.addEventListener('click', function(event) {
        event.target.style.color = 'red';
      });
    }
  }
  customElements.define('my-element', MyElement);

  // Create an instance via JavaScript
  var myElement = new MyElement();
  myElement.textContent = "MyElement from Code";
  document.body.appendChild(myElement);
</script>
</htmlexample>

ReadOnly:
true

Spec:
https://html.spec.whatwg.org/multipage/custom-elements.html

----
instance.document : Document

Returns the document for this window.

<htmlexample>
<div>Hello World</div>
<script>
  console.log(document.body.firstChild.textContent);
</script>
</htmlexample>


ReadOnly:
true

Spec:
https://html.spec.whatwg.org/#dom-document-2

----
instance.name : String


Spec:
https://html.spec.whatwg.org/#dom-name

----
instance.location : Location

Describes the url of the current page. See %%/Location|Location%% for
more details.

<htmlexample>
<script>
  console.log(location.href);
  console.log(location.protocol);
  console.log(location.hostname);
  console.log(location.pathname);
  console.log(location.search);
  console.log(location.hash);
</script>
</htmlexample>

ReadOnly:
true

Spec:
https://html.spec.whatwg.org/#dom-location

----
instance.history : History

Represents the user's browser history and allows the page
to manipulate the history by adding pages or navigating between
pages. See %%/History|History%% for more details.

<htmlexample>
<button onclick='pushState()'>Push State</button><br>
<button onclick='replaceState()'>Replace State</button><br>
<button onclick='history.back()'>Back</button><br>
<button onclick='history.forward()'>Forward</button><br>
<input id='goAmount' value='-1'><button onclick='go()'>Go</button>
<div>
  history.state = <span id='historyState'></span>
</div>
<div>
  history.length = <span id='historyLength'></span>
</div>
<div>
  href = <span id='locationHref'></span>
</div>
<script>
  var onStateChange = function() {
    document.getElementById('historyState').textContent = history.state;
    document.getElementById('historyLength').textContent = history.length;
    document.getElementById('locationHref').textContent = location.href;
  };

  window.onpopstate = onStateChange;

  onStateChange();

  var pushState = function() {
    var newState = (history.state || 0) + 1;
    history.pushState(newState, 'Pushed: ' + newState, '/History?state=' + newState);
    onStateChange();
  };

  var replaceState = function() {
    var newState = (history.state || 0) + 1;
    history.replaceState(newState, 'Replaced: ' + newState, '/History?state=' + newState);
    onStateChange();
  };

  var go = function() {
    var amount = +document.getElementById('goAmount').value;
    history.go(amount);
  };
</script>
</htmlexample>

ReadOnly:
true

Spec:
https://html.spec.whatwg.org/#dom-history

----
instance.status : String

----
instance.localStorage : Storage

**localStorage** allows saving data in the web browser
that can be retrieved in future views of the web page.
The data is saved across browser sessions and computer
reboots.
See also %%#sessionStorage|**sessionStorage**%% and
%%/Storage|Storage%% for more details.

<htmlexample>
<input id='tosave'>
<button onclick='save()'>Save</button>
<div id='lastsaved'></div>
<script>
  var lastSavedElement = document.getElementById('lastsaved');
  lastSavedElement.textContent = localStorage['saved'];

  var save = function() {
    var value = document.getElementById('tosave').value;
    localStorage['saved'] = value
    lastSavedElement.textContent = value;
  };
</script>
</htmlexample>

ReadOnly:
true

----
instance.sessionStorage : Storage

**sessionStorage** allows saving data in the web browser
that can be retrieved in future views of the web page.
The data is only saved for the current session, that is until
the user closes the web browser.
See also %%#localStorage|**localStorage**%% and
%%/Storage|Storage%% for more details.

<htmlexample>
<input id='tosave'>
<button onclick='save()'>Save</button>
<div id='lastsaved'></div>
<script>
  var lastSavedElement = document.getElementById('lastsaved');
  lastSavedElement.textContent = sessionStorage['saved'];

  var save = function() {
    var value = document.getElementById('tosave').value;
    sessionStorage['saved'] = value
    lastSavedElement.textContent = value;
  };
</script>
</htmlexample>

ReadOnly:
true

----
instance.navigator : Navigator


----
instance.external : External


ReadOnly:
true

----
instance.applicationCache : ApplicationCache

ReadOnly:
true

----
instance.indexedDB : IDBFactory

----
instance.innerWidth : Number

Width of the browser window in CSS pixels exluding any browser chrome.

<example>
console.log(window.innerWidth);
console.log(window.outerWidth);
console.log(screen.availWidth);
console.log(screen.width);
</example>

ReadOnly:
true

Spec:
https://drafts.csswg.org/cssom-view/#dom-window-innerwidth

----
instance.innerHeight : Number

Height of the browser window in CSS pixels excluding any browser chrome.

<example>
console.log(window.innerHeight);
console.log(window.outerHeight);
console.log(screen.availHeight);
console.log(screen.height);
</example>

ReadOnly:
true

Spec:
https://drafts.csswg.org/cssom-view/#dom-window-outerheight


----
instance.outerWidth : Number

Width of the browser window in CSS pixels including any browser chrome.

<example>
console.log(window.outerWidth);
</example>

ReadOnly:
true

Spec:
https://drafts.csswg.org/cssom-view/#dom-window-outerwidth

----
instance.outerHeight : Number

Height of the browser window in CSS pixels including any browser chrome.

<example>
console.log(window.outerHeight);
</example>

ReadOnly:
true

Spec:
https://drafts.csswg.org/cssom-view/#dom-window-outerheight

----
instance.screen : Screen

ReadOnly:
true

Spec:
https://drafts.csswg.org/cssom-view/#dom-window-screen

----
instance.screenX : Number

X position of the top left corner of the browser in pixels.
See %%/Screen|screen%% for details about the size of the
screen.

<example>
console.log(window.screenX);
</example>

ReadOnly:
true

Spec:
https://drafts.csswg.org/cssom-view/#dom-window-screenx

----
instance.screenY : Number

Y position of the top left corner of the browser in pixels.
See %%/Screen|screen%% for details about the size of the
screen.

<example>
console.log(window.screenY);
</example>

ReadOnly:
true

Spec:
https://drafts.csswg.org/cssom-view/#dom-window-screeny


----
prototype.btoa(encoded : String) : String

Converts a unicode/binary string into an ascii encoded string
(%%http://en.wikipedia.org/wiki/Base64|base64%%).
See also %%#atob|**atob()**%%.

<htmlexample>
<script>
  var string = 'Hello world!';
  var base64 = btoa(string);
  var decoded = atob(base64);

  console.log(base64);
  console.log(decoded);
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/#dom-windowbase64-btoa

----
prototype.atob(unencoded : String) : String

Converts an ascii encoded string
(%%http://en.wikipedia.org/wiki/Base64|base64%%)
into a unicode/binary string.
See also %%#btob|**btob()**%%.

<htmlexample>
<script>
  var string = 'Hello world!';
  var base64 = btoa(string);
  var decoded = atob(base64);

  console.log(base64);
  console.log(decoded);
</script>
</htmlexample>


Spec:
https://html.spec.whatwg.org/#dom-windowbase64-atob

----
prototype.setTimeout(callback : Function, [timeout = 0: Number, [...]]) : Number

Schedules **callback** to be called once after **timeout** milliseconds. Any extra
parameters after **timeout** are passed to **callback**.

Returns a unique handle that can be passed to %%#clearTimeout|**clearTimeout()**%%
to stop **callback** from being called.

See also %%#setInterval|**setInterval()**%% and %%#requestAnimationFrame|**requestAnimationFrame()**%%.

<htmlexample>
<script>
  var handle = setTimeout(function(parameter1, parameter2) {
    console.log('in callback');
    console.log('  parameter1=' + parameter1);
    console.log('  parameter2=' + parameter2);
  }, 1000, 'foo', 'bar');
  console.log('after setTimeout');
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/#dom-windowtimers-settimeout

----
prototype.setTimeout(callback : String, [timeout = 0: Number, [...]]) : Number

Same as %%#setTimeout_Function_Number_dotdotdot|setTimeout()%% where the
**callback** string is passed to %%/Global#eval|eval%% when the time has elapsed.

Spec:
https://html.spec.whatwg.org/#dom-windowtimers-settimeout

----
prototype.clearTimeout(handle : Number) : undefined

Stops a timeout from running.  **handle** is the value returned by %%#setTimeout|**setTimeout()**%%.

<htmlexample>
<script>
  var handle1 = setTimeout(function() {
    console.log('in timeout callback 1');
  }, 100);

  var handle2 = setTimeout(function() {
    console.log('in timeout callback 2');
  }, 100);

  clearTimeout(handle1);
</script>
</htmlexample>

----
prototype.createImageBitmap(source : HTMLImageElement) : Promise<ImageBitmap>

<htmlexample>
<canvas></canvas>
<script>
(async () => {
  const img = new Image();
  await new Promise(r => {
    img.onload = r;
    img.src = '/pic.jpg';
  });

  const imageBitmap = await createImageBitmap(img);

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : HTMLImageElement, [options : { \
    imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \
    premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \
    colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \
    resizeWidth : Number, \
    resizeHeight : Number, \
    resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \
  }]) : Promise<ImageBitmap>

<htmlexample>
<canvas></canvas>
<script>
(async () => {
  const img = new Image();
  await new Promise(r => {
    img.onload = r;
    img.src = 'pic.jpg';
  });

  const imageBitmap = await createImageBitmap(img, {
      imageOrientation: 'flipY',
      resizeWidth: 100,
      resizeHeight: 100,
      resizeQuality: 'pixelated'
    });

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : HTMLImageElement, sx : Number, sy : Number, sw : Number, sh : Number) : Promise<ImageBitmap>

<htmlexample>
<canvas></canvas>
<script>
(async () => {
  const img = new Image();
  await new Promise(r => {
    img.onload = r;
    img.src = '/pic.jpg';
  });

  const imageBitmap = await createImageBitmap(img, 10, 100, 140, 80);

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : HTMLImageElement, \
  sx : Number, sy : Number, sw : Number, sh : Number, \
  [options : { \
    imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \
    premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \
    colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \
    resizeWidth : Number, \
    resizeHeight : Number, \
    resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \
  }]) : Promise<ImageBitmap>

<htmlexample>
<canvas></canvas>
<script>
(async () => {
  const img = new Image();
  await new Promise(r => {
    img.onload = r;
    img.src = 'pic.jpg';
  });

  const imageBitmap = await createImageBitmap(img, 10, 100, 140, 80, {
      imageOrientation: 'flipY',
      resizeWidth: 300,
      resizeHeight: 300,
      resizeQuality: 'pixelated'
    });

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : HTMLVideoElement) : Promise<ImageBitmap>

<htmlexample>
<button>Play</button><br>
<canvas></canvas>
<script>
document.querySelector('button').onclick = async () => {
  const video = document.createElement('video');
  video.muted = true;
  video.src = 'fireworks.ogv';
  await new Promise(r => {
    video.oncanplay = r;
    video.load();
  });

  const canvas = document.querySelector('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  const context = canvas.getContext('bitmaprenderer');

  const draw = async () => {
    const imageBitmap = await createImageBitmap(video);
    context.transferFromImageBitmap(imageBitmap);

    if (!video.paused) {
      requestAnimationFrame(draw);
    }
  };
  video.play();
  draw();
};
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : HTMLVideoElement, [options : { \
    imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \
    premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \
    colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \
    resizeWidth : Number, \
    resizeHeight : Number, \
    resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \
  }]) : Promise<ImageBitmap>

<htmlexample>
<button>Play</button><br>
<canvas></canvas>
<script>
document.querySelector('button').onclick = async () => {
  const video = document.createElement('video');
  video.muted = true;
  video.src = '/fireworks.ogv';
  await new Promise(r => {
    video.oncanplay = r;
    video.load();
  });

  const canvas = document.querySelector('canvas');
  canvas.width = 200;
  canvas.height = 200;
  const context = canvas.getContext('bitmaprenderer');

  const draw = async () => {
    const imageBitmap = await createImageBitmap(video, {
      imageOrientation: 'flipY',
      resizeWidth: canvas.width,
      resizeHeight: canvas.height,
      resizeQuality: 'pixelated'
    });
    context.transferFromImageBitmap(imageBitmap);

    if (!video.paused) {
      requestAnimationFrame(draw);
    }
  };

  video.play();
  draw();
};
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : HTMLCanvasElement) : Promise<ImageBitmap>

<htmlexample>
<canvas></canvas>
<script>
(async () => {
  const src = document.createElement('canvas');
  const srcContext = src.getContext('2d');
  srcContext.font = '48px sans-serif';
  srcContext.fillText('canvas test', 10, 35);

  const imageBitmap = await createImageBitmap(src);

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : HTMLCanvasElement, [options : { \
    imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \
    premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \
    colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \
    resizeWidth : Number, \
    resizeHeight : Number, \
    resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \
  }]) : Promise<ImageBitmap>

<htmlexample>
<canvas></canvas>
<script>
(async () => {
  const src = document.createElement('canvas');
  const srcContext = src.getContext('2d');
  srcContext.font = '48px sans-serif';
  srcContext.fillText('canvas test', 10, 35);

  const imageBitmap = await createImageBitmap(src, {
      imageOrientation: 'flipY',
      resizeWidth: 100,
      resizeHeight: 100,
      resizeQuality: 'pixelated'
    });

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : Blob) : Promise<ImageBitmap>

<htmlexample>
<canvas></canvas>
<script>
(async () => {
  const res = await fetch('/pic.jpg');
  const blob = await res.blob();
  const imageBitmap = await createImageBitmap(blob);

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : Blob, [options : { \
    imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \
    premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \
    colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \
    resizeWidth : Number, \
    resizeHeight : Number, \
    resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \
  }]) : Promise<ImageBitmap>

<htmlexample>
<canvas></canvas>
<script>
(async () => {
  const res = await fetch('/pic.jpg');
  const blob = await res.blob();
  const imageBitmap = await createImageBitmap(blob, {
      imageOrientation: 'flipY',
      resizeWidth: 100,
      resizeHeight: 100,
      resizeQuality: 'pixelated'
    });

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : ImageData) : Promise<ImageBitmap>

<htmlexample>
<canvas></canvas>
<script>
(async () => {
  const src = document.createElement('canvas');
  const srcContext = src.getContext('2d');
  srcContext.font = '48px sans-serif';
  srcContext.fillText('canvas test', 10, 35);

  const imageData = srcContext.getImageData(0, 0, 150, 150);

  const imageBitmap = await createImageBitmap(imageData);

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : ImageData, [options : { \
    imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \
    premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \
    colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \
    resizeWidth : Number, \
    resizeHeight : Number, \
    resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \
  }]) : Promise<ImageBitmap>

<htmlexample>
<canvas></canvas>
<script>
(async () => {
  const src = document.createElement('canvas');
  const srcContext = src.getContext('2d');
  srcContext.font = '48px sans-serif';
  srcContext.fillText('canvas test', 10, 35);

  const imageData = srcContext.getImageData(0, 0, 150, 150);

  const imageBitmap = await createImageBitmap(imageData,
    {
      imageOrientation: 'flipY',
      resizeWidth: 100,
      resizeHeight: 100,
      resizeQuality: 'pixelated'
    });

  const canvas = document.querySelector('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const context = canvas.getContext('bitmaprenderer');
  context.transferFromImageBitmap(imageBitmap);
})();
</script>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.createImageBitmap(source : ImageBitmap, [options : { \
    imageOrientation : String /* One of **'none'** or **'flipY'**. Default is **'none'**. */, \
    premultiplyAlpha : String /* One of **'none'**, **'premultiply'**, or **'default'**. Default is **'default'**. */, \
    colorSpaceConversion : String /* One of **'none'** or **'default'**. Default is **'default'**. */, \
    resizeWidth : Number, \
    resizeHeight : Number, \
    resizeQuality : String /* One of **'pixelated'**, **'low'**, **'medium'**, or **'high'**. Default is **'low'**. */ \
  }]) : Promise<ImageBitmap>

<htmlexample>
</htmlexample>

Spec:
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap

----
prototype.requestAnimationFrame(callback(time : Number) : undefined) : Number

Schedules **callback** to be called before the next time the browser renders a
frame to the screen. Must be called each time you'd like to schedule another
frame.

The **time** parameter to callback is the number of milliseconds since the
page loaded.

Returns a unique handle that can be passed to %%#cancelAnimationFrame|**cancelAnimationFrame()**%%
to stop **callback** from being called.

<htmlexample>
<button onclick='play()'>play</button>
<button onclick='stop()'>stop</button><br>
<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var id = -1;
  var callback = function(time) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillRect(10, 10, 30 * (Math.sin(time / 1000) + 1), 30);
    context.fillText(time, 10, 75);

    id = requestAnimationFrame(callback);
  };

  var play = function() {
    if (id === -1) {
      id = requestAnimationFrame(callback);
    }
  };
  var stop = function() {
    cancelAnimationFrame(id);
    id = -1;
  };
</script>
</htmlexample>

----
prototype.cancelAnimationFrame(handle : Number) : undefined

Stops an animation frame callback from running.  **handle** is the
value returned by %%#requestAnimationFrame|**requestAnimationFrame()**%%.

<htmlexample>
<script>
  var handle1 = requestAnimationFrame(function() {
    console.log('in animation callback 1');
  });

  var handle2 = requestAnimationFrame(function() {
    console.log('in animation callback 2');
  });

  cancelAnimationFrame(handle1);
</script>
</htmlexample>

----
prototype.setInterval(callback : Function, [timeout : Number, [...]]) : Number

Schedules **callback** to be called repeatedly, every **timeout** milliseconds.
Any extra parameters after **timeout** are passed to **callback**.

Returns a unique handle that can be passed to %%#clearInterval|**clearInterval()**%%
to stop **callback** from being called.

See also %%#setTimeout|**setTimeout()**%% and %%#requestAnimationFrame|**requestAnimationFrame()**%%.

<htmlexample>
<script>
  var callCount = 0;

  var handle = setInterval(function(parameter1, parameter2) {
    console.log('in callback count=' + callCount);
    console.log('  parameter1=' + parameter1);
    console.log('  parameter2=' + parameter2);

    callCount++;
    if (callCount === 3) {
      clearInterval(handle);
    }
  }, 500, 'foo', 'bar');
</script>
</htmlexample>


----
prototype.setInterval(callback : String, [timeout : Number, [...]]) : Number

Same as %%#setInterval_Function_Number_dotdotdot|setInterval()%% where the
**callback** string is passed to %%/Global#eval|eval%% when the time has elapsed.

----
prototype.clearInterval(handle : Number) : undefined

Stops an %%#setInterval|**setInterval()**%% callback from running.
**handle** is the value returned by **setInterval()**.

<htmlexample>
<script>
  var callCount = 0;

  var handle = setInterval(function(parameter1, parameter2) {
    console.log('in callback count=' + callCount);
    console.log('  parameter1=' + parameter1);
    console.log('  parameter2=' + parameter2);

    callCount++;
    if (callCount === 5) {
      clearInterval(handle);
    }
  }, 500, 'foo', 'bar');
</script>
</htmlexample>


----
prototype.blur() : undefined


----
prototype.close() : undefined


----
prototype.fetch(url : String, [requestInit : Object]) : Promise<Response>

Fetches the specified url. See also %%/Request|Request%% and %%/Response|Response%%.

<htmlexample>
<script>
  fetch('/').then(function(response) {
    return response.text();
  }).then(function(text) {
    console.log(text.substring(0, 30));
  });
</script>
</htmlexample>

Spec:
https://fetch.spec.whatwg.org/#dom-global-fetch

----
prototype.fetch(request : Request, [requestInit : Object]) : Promise<Response>

Fetches the specified web request. If **requestInit** is specified, its values
overwrite the values on **request**. See also %%/Request|Request%% and %%/Response|Response%%.

<htmlexample>
<script>
  var request = new Request('/', { method: 'HEAD' });
  fetch(request).then(function(response) {
    for (var kvp of response.headers) {
      console.log(kvp[0] + ': ' + kvp[1]);
    }
  });
</script>
</htmlexample>

Spec:
https://fetch.spec.whatwg.org/#dom-global-fetch

----
prototype.focus() : undefined


----
prototype.stop() : undefined



----
prototype.open([url : String, [target = '_blank' : String, [features : String, [replace : Boolean]]]]) : Window

Opens a new tab or window for the specified **url**.

<html>
<dl>
<dt>
**url**
<dd>
the url to open or **''** to open an empty window.

<dt>
**target**
<dd>
must be one of:
<dl>
<dt>**'_blank'** <dd>open in new window, the default
<dt>**'_parent'**<dd>open in parent page/frame
<dt>**'_self'**<dd>open in current page/frame
<dt>**'_top'**<dd>open in top page
<dt>**'&lt;name&gt;'**<dd>open in the window with the specified name
</dl>

<dt>
**features**
<dd>
is a comma separated list of **'&lt;name&gt;=&lt;value&gt;'** pairs where the
valid names are **'left'**, **'top'**, **'height'**, **'width'**.

<dt>
**replace**
<dd>
pass **true** to replace the contents instead of opening a new window.
</dl>
</html>

<htmlexample>
<button onclick="openWindow()">Open Window</button>
<script>
  var openWindow = function() {
    var width = screen.availWidth * .5;
    var height = screen.availHeight * .75;
    var left = (screen.availWidth - width) / 2;
    var top = (screen.availHeight - height) / 2;
    var newWindow = window.open('', '_blank', `left=${left},top=${top},width=${width},height=${height}`);
    newWindow.document.title = 'My Window';
    newWindow.document.body.innerHTML = 'new window content';
    newWindow.onunload = function() {
      console.log('window closed');
    };
  };
</script>
</htmlexample>

----
prototype.alert(message : String) : undefined

Displays a message box to the user with the specified message.

Script execution is paused while the message box is displayed.

See also
%%#confirm|**confirm()**%%
and
%%#prompt|**prompt()**%%.

<htmlexample>
<button onclick="alert('In alert')">Show alert</button>
</htmlexample>

----
prototype.confirm(message : String) : Boolean

Displays an Ok/Cancel message box to the user with the specified message.
Returns **true** if the user clicked Ok.

Script execution is paused while the message box is displayed.

See also
%%#alert|**alert()**%%
and
%%#prompt|**prompt()**%%.

<htmlexample>
<button onclick="showConfirm()">Show confirm</button>
<script>
  var showConfirm = function() {
    if (confirm('In confirm')) {
      console.log('user clicked ok');
    }
    else {
      console.log('user clicked cancel');
    }
  };
</script>
</htmlexample>

----
prototype.matchMedia(query : String) : MediaQueryList

Spec:
https://drafts.csswg.org/cssom-view/#dom-window-matchmedia

----
prototype.prompt(message : String, [default : String]) : String

Displays a message box containing an input box to the user with
the specified message. The input box will be prepopulated with
**default** if it is specified.

Returns the String the user typed in the input box if the user clicks
ok and **null** if they click cancel.

Script execution is paused while the message box is displayed.

See also
%%#alert|**alert()**%%
and
%%#confirm|**confirm()**%%.

<htmlexample>
<button onclick="showPrompt()">Show prompt</button>
<script>
  var showPrompt = function() {
    var result = prompt('In prompt', 'With default');

    if (result !== null) {
      console.log('prompt returned "' + result + '"');
    }
    else {
      console.log('user clicked cancel');
    }
  };
</script>
</htmlexample>

----
prototype.print() : undefined


----
prototype.showModalDialog(url : String, [arguments : Object]) : Object


----
prototype.getComputedStyle(element : Element, [pseudoElement : String]) : CSSStyleDeclaration

Computes the effective style for **element** including all CSS rules that
apply to **element**. See also %%/HTMLElement#style|**element.style**%%.

<htmlexample>
<style>
  .bar { font-weight: bold;  }
</style>
<span id='foo' class='bar' style='color: red'>foo</span>
<script>
  var foo = document.getElementById('foo');

  console.log('color:  ' + foo.style.color);
  console.log('weight: ' + foo.style.fontWeight);

  var computedStyle = window.getComputedStyle(foo);
  console.log('computed color:  ' + computedStyle.color);
  console.log('computed weight: ' + computedStyle.fontWeight);
</script>
</htmlexample>

Spec:
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle

----
prototype.postMessage(message : Object, expectedOrigin : String, [transfer : Array<Transferable>]) : undefined

<p>
Sends **message** to **this** (usually something other than the global
%%/Global#window|**window**%%, like the %%#parent|**parent**%%, iframe
%%/HTMLIFrameElement#contentWindow|**contentwindow**%%, or return value of
%%#open|**open()**%%). The **message** will be available in the
%%/MessageEvent#data|**MessageEvent.data**%% property on the event passed to
the %%#message|onmessage%% event listener. To ensure the window's content has
not changed while the message is in flight, **expectedOrigin** must match
%%/Location#origin|**this.origin**%% (or be **'*'** to ignore check and
possibly send the message to another site). The elements of
**objectsToTransfer** will be transferred to the JavaScript context that
owns **this** and no longer available in the context that called
**postMessage()**.
</p>
<p>
See also %%/MessageChannel|MessageChannel%%.
</p>
<htmlexample>
<iframe id='iframe'></iframe>

<script id='iframeCode' type ='text/plain'>
  var intArray = new Int32Array([17, 58]);
  var message = { foo: 'bar', ints: intArray };
  parent.postMessage(message, '*', [intArray.buffer]);
  // intArray is no longer valid
</script>

<script>
  window.onmessage = function(event) {
    console.log('Received:');
    console.dir(event.data);
  };

  var iframe = document.querySelector('#iframe');

  var code = document.getElementById('iframeCode').textContent;
  var html = '<script>' + code + '</' + 'script>';
  var blob = new Blob([html], { type: 'text/html' });

  iframe.src = URL.createObjectURL(blob);
</script>
</htmlexample>

----
event.abort : listener(event : Event) : undefined

----
event.afterprint : listener(event : Event) : undefined

----
event.beforeprint : listener(event : Event) : undefined

----
event.beforeunload : listener(event : BeforeUnloadEvent) : String

Called before the page is navigated away from.  Return a non-empty
String from **listener** to display a dialog box that gives the user
the option to remain on the current page.

<htmlexample>
<button onclick="addBeforeunload()">Add onbeforeunload callback</button><br>
http://
<script>
  var addBeforeunload = function() {
    window.onbeforeunload = function() {
      return 'Returned by onbeforeunload';
    };
  }
</script>
</htmlexample>

----
event.blur : listener(event : Event) : undefined

----
event.canplay : listener(event : Event) : undefined

----
event.canplaythrough : listener(event : Event) : undefined

----
event.change : listener(event : Event) : undefined

----
event.click : listener(event : Event) : undefined

----
event.contextmenu : listener(event : Event) : undefined

----
event.cuechange : listener(event : Event) : undefined

----
event.dblclick : listener(event : Event) : undefined

----
event.drag : listener(event : Event) : undefined

----
event.dragend : listener(event : Event) : undefined

----
event.dragenter : listener(event : Event) : undefined

----
event.dragleave : listener(event : Event) : undefined

----
event.dragover : listener(event : Event) : undefined

----
event.dragstart : listener(event : Event) : undefined

----
event.drop : listener(event : Event) : undefined

----
event.durationchange : listener(event : Event) : undefined

----
event.emptied : listener(event : Event) : undefined

----
event.ended : listener(event : Event) : undefined

----
event.error : listener(event : Event, source : String, line : Number, column : Number) : undefined

----
event.focus : listener(event : Event) : undefined

----
event.hashchange : listener(event : HashChangeEvent) : undefined

Fired when the **'#'** portion of the url changes.  See also
%%/Location#hash|**location.hash**%%.

<htmlexample>
<a id='foo' href='#bar'>Go to #bar</a>
<div style='height: 1000px'></div>
<a id='bar' href='#foo'>Go to #foo</a>

<script>
  window.onhashchange = function(event) {
    console.log('oldURL: ' + event.oldURL);
    console.log('newURL: ' + event.newURL);
  };
</script>
</htmlexample>

----
event.input : listener(event : Event) : undefined

----
event.invalid : listener(event : Event) : undefined

----
event.keydown : listener(event : Event) : undefined

----
event.keypress : listener(event : Event) : undefined

----
event.keyup : listener(event : Event) : undefined

----
event.load : listener(event : Event) : undefined

----
event.loadeddata : listener(event : Event) : undefined

----
event.loadedmetadata : listener(event : Event) : undefined

----
event.loadstart : listener(event : Event) : undefined

----
event.message : listener(event : Event) : undefined

Fired when %%#postMessage|**postMessage()**%% is called on **this**.

----
event.mousedown : listener(event : Event) : undefined
----
event.mousemove : listener(event : Event) : undefined
----
event.mouseout : listener(event : Event) : undefined
----
event.mouseover : listener(event : Event) : undefined
----
event.mouseup : listener(event : Event) : undefined
----
event.mousewheel : listener(event : Event) : undefined
----
event.offline : listener(event : Event) : undefined
----
event.online : listener(event : Event) : undefined
----
event.pause : listener(event : Event) : undefined
----
event.play : listener(event : Event) : undefined
----
event.playing : listener(event : Event) : undefined
----
event.pagehide : listener(event : Event) : undefined
----
event.pageshow : listener(event : Event) : undefined
----
event.popstate : listener(event : PopStateEvent) : undefined

Called when the page navigation changes.  See also %%/History|History%%.

Spec:
https://html.spec.whatwg.org/#handler-window-onpopstate

----
event.progress : listener(event : Event) : undefined

----
event.ratechange : listener(event : Event) : undefined

----
event.reset : listener(event : Event) : undefined

----
event.resize : listener(event : Event) : undefined

----
event.scroll : listener(event : Event) : undefined

----
event.seeked : listener(event : Event) : undefined

----
event.seeking : listener(event : Event) : undefined

----
event.select : listener(event : Event) : undefined

----
event.show : listener(event : Event) : undefined

----
event.stalled : listener(event : Event) : undefined

----
event.submit : listener(event : Event) : undefined

----
event.suspend : listener(event : Event) : undefined

----
event.timeupdate : listener(event : Event) : undefined

----
event.unload : listener(event : Event) : undefined

----
event.volumechange : listener(event : Event) : undefined

----
event.storage : listener(event : StorageEvent) : undefined

----
event.unhandledrejection : listener(event : PromiseRejectionEvent) : undefined

Fired when a %%/Promise|Promise%%'s reject handler is called or an exception is
thrown in an Promise executor function or in an async function.

<htmlexample>
<script>
  window.onunhandledrejection = function(event) {
    console.log('Unhandled rejection: ' + event.reason);
    event.preventDefault();
  };

  new Promise(function(resolve, reject) {
    reject('Promise reject');
  });

  new Promise(function(resolve, reject) {
    throw 'Promise throw';
  });

  (async function() {
    throw 'async function throw';
  })();
</script>
</htmlexample>

----
event.copy : listener(event : ClipboardEvent) : undefined

Bubbles:
true

Cancelable:
true

Spec:
https://w3c.github.io/clipboard-apis/#clipboard-event-copy

----
event.cut : listener(event : ClipboardEvent) : undefined

Bubbles:
true

Cancelable:
true

Spec:
https://w3c.github.io/clipboard-apis/#clipboard-event-cut

----
event.paste : listener(event : ClipboardEvent) : undefined

Bubbles:
true

Cancelable:
true

Spec:
https://w3c.github.io/clipboard-apis/#clipboard-event-paste

----
event.gamepadconnected : listener(event : GamepadEvent) : undefined

<htmlexample>
Press button on controller to connect.
<script>
window.addEventListener('gamepadconnected', (event) => {
  console.log('gamepad connected', event.gamepad.id);
});
window.addEventListener('gamepaddisconnected', (event) => {
  console.log('gamepad disconnected', event.gamepad.id);
});
</script>
</htmlexample>

Spec:
https://w3c.github.io/gamepad/#event-gamepadconnected

----
event.gamepaddisconnected : listener(event : GamepadEvent) : undefined

<htmlexample>
Press button on controller to connect.
<script>
window.addEventListener('gamepadconnected', (event) => {
  console.log('gamepad connected', event.gamepad.id);
});
window.addEventListener('gamepaddisconnected', (event) => {
  console.log('gamepad disconnected', event.gamepad.id);
});
</script>
</htmlexample>

Spec:
https://w3c.github.io/gamepad/#event-gamepaddisconnected