HTML5 Canvas, Web Storage, Geolocation API Reference

`Canvas`

5 methods

The Canvas 2D rendering context for drawing shapes, text, and images programmatically.

canvas.getContext('2d') -> CanvasRenderingContext2D | null

Returns the 2D rendering context used for drawing on the canvas.

Returns

CanvasRenderingContext2D | null

Example

html5

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);

ctx.fillRect(x, y, width, height)

Paints a filled rectangle using the current fillStyle.

Parameters

Name	Type	Description
x	number	X coordinate of the top-left corner.
y	number	Y coordinate of the top-left corner.
width	number	Rectangle width.
height	number	Rectangle height.

Returns

void

Example

html5

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 50);

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise?)

Adds a circular arc to the current sub-path. Call fill() or stroke() afterward to render.

Parameters

Name	Type	Description
x	number	Center X.
y	number	Center Y.
radius	number	Arc radius.
startAngle	number	Start angle in radians.
endAngle	number	End angle in radians.

Returns

void

Example

html5

ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();

ctx.fillText(text, x, y, maxWidth?)

Draws filled text at the given coordinates using the current font and fillStyle.

Parameters

Name	Type	Description
text	string	Text to draw.
x	number	X coordinate.
y	number	Y coordinate (baseline).

Returns

void

Example

html5

ctx.font = '24px sans-serif';
ctx.fillText('Hello', 20, 40);

ctx.drawImage(image, dx, dy, dw?, dh?)

Draws an image, canvas, or video onto the canvas at the given position and size.

Parameters

Name	Type	Description
image	Image \| Canvas \| Video	Source image to draw.
dx	number	Destination X.
dy	number	Destination Y.
dw	number	Optional destination width.
dh	number	Optional destination height.

Returns

void

Example

html5

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0, 100, 100);
img.src = 'logo.png';

`Storage`

5 methods

Web Storage API (localStorage and sessionStorage) for synchronous key/value persistence scoped per origin.

storage.setItem(key, value)

Adds or updates a key/value pair. Both key and value must be strings.

Parameters

Name	Type	Description
key	string	Key name.
value	string	Value to store.

Returns

void

Example

html5

localStorage.setItem('theme', 'dark');
sessionStorage.setItem('token', 'abc');

storage.getItem(key) -> string | null

Returns the value for the key, or null if the key does not exist.

Parameters

Name	Type	Description
key	string	Key name.

Returns

string | null

Example

html5

const theme = localStorage.getItem('theme');
console.log(theme); // 'dark'

storage.removeItem(key)

Removes the key and its value from storage.

Parameters

Name	Type	Description
key	string	Key name.

Returns

void

Example

html5

localStorage.removeItem('theme');

storage.clear()

Removes all key/value pairs from the storage area.

Returns

void

Example

html5

sessionStorage.clear();

storage.key(index) -> string | null

Returns the name of the key at the given index, useful for iterating storage.

Parameters

Name	Type	Description
index	number	Zero-based index.

Returns

string | null

Example

html5

for (let i = 0; i < localStorage.length; i++) {
  console.log(localStorage.key(i));
}

`Geolocation`

3 methods

The navigator.geolocation API for obtaining the user's geographic position.

navigator.geolocation.getCurrentPosition(success, error?, options?)

Gets the device's current position once. Requires a secure context (HTTPS) and user permission.

Parameters

Name	Type	Description
success	(position: GeolocationPosition) => void	Callback receiving the position.
error	(err: GeolocationPositionError) => void	Optional error callback.
options	PositionOptions	Optional { enableHighAccuracy, timeout, maximumAge }.

Returns

void

Example

html5

navigator.geolocation.getCurrentPosition(
  pos => console.log(pos.coords.latitude, pos.coords.longitude),
  err => console.error(err.code, err.message)
);

navigator.geolocation.watchPosition(success, error?, options?) -> number

Registers a handler called automatically each time the position changes. Returns a watch ID.

Parameters

Name	Type	Description
success	(position: GeolocationPosition) => void	Callback receiving each new position.
error	(err: GeolocationPositionError) => void	Optional error callback.

Returns

number (watch ID)

Example

html5

const id = navigator.geolocation.watchPosition(
  pos => console.log(pos.coords)
);

navigator.geolocation.clearWatch(id)

Unregisters a position watcher previously installed with watchPosition.

Parameters

Name	Type	Description
id	number	Watch ID returned by watchPosition.

Returns

void

Example

html5

navigator.geolocation.clearWatch(id);

All references