Class default

Used to add a badge (pill) to a given image, this can be used to update a favicon and more.

Inspired by Roko C. Buljan's answer on Stack Overflow. Reference

Hierarchy

EventEmitter<BadgerEvents>
- default

Index

Constructors

constructor

new default(options?): default
Parameters
- Optional options: BadgerOptions
Returns default
Overrides EventEmitter<BadgerEvents>.constructor
- Defined in src/index.ts:64

Properties

`Private` #canvas

#canvas: HTMLCanvasElement = ...

`Private` #ctx

#ctx: null | CanvasRenderingContext2D = ...

`Private` #image

#image: HTMLImageElement = ...

`Private` #offset

#offset: {
x: number;
y: number;
} = ...

Type declaration

x: number
y: number

`Private` #options

#options: Required<BadgerOptions> = Badger.DefaultOptions

`Private` #size

#size: number = 0

`Private` #url

#url: string

`Private` #value

#value: number = 0

`Static` DefaultOptions

DefaultOptions: Required<BadgerOptions> = ...

`Static` Offsets

Offsets: {
    bottom: {
        x: number;
        y: number;
    };
    bottomLeft: {
        x: number;
        y: number;
    };
    bottomRight: {
        x: number;
        y: number;
    };
    center: {
        x: number;
        y: number;
    };
    left: {
        x: number;
        y: number;
    };
    right: {
        x: number;
        y: number;
    };
    top: {
        x: number;
        y: number;
    };
    topLeft: {
        x: number;
        y: number;
    };
    topRight: {
        x: number;
        y: number;
    };
} = ...

Type declaration

bottom: {
x: number;
y: number;
}
- x: number
- y: number
bottomLeft: {
x: number;
y: number;
}
- x: number
- y: number
bottomRight: {
x: number;
y: number;
}
- x: number
- y: number
center: {
x: number;
y: number;
}
- x: number
- y: number
left: {
x: number;
y: number;
}
- x: number
- y: number
right: {
x: number;
y: number;
}
- x: number
- y: number
top: {
x: number;
y: number;
}
- x: number
- y: number
topLeft: {
x: number;
y: number;
}
- x: number
- y: number
topRight: {
x: number;
y: number;
}
- x: number
- y: number

`Static` prefixed

prefixed: string | boolean

Accessors

backgroundColor

get backgroundColor(): string | CanvasGradient | CanvasPattern
The background color for the badge (pill).

Returns string | CanvasGradient | CanvasPattern
- Defined in src/index.ts:182
set backgroundColor(value): void
Parameters
- value: undefined | string | CanvasGradient | CanvasPattern
Returns void
- Defined in src/index.ts:186

color

get color(): string | CanvasGradient | CanvasPattern
The text color for the badge (pill).

Returns string | CanvasGradient | CanvasPattern
- Defined in src/index.ts:196
set color(value): void
Parameters
- value: undefined | string | CanvasGradient | CanvasPattern
Returns void
- Defined in src/index.ts:200

position

get position(): "top" | "right" | "bottom" | "left" | "topLeft" | "topRight" | "bottomRight" | "bottomLeft" | "center"
Where the badge should be positioned.

Returns "top" | "right" | "bottom" | "left" | "topLeft" | "topRight" | "bottomRight" | "bottomLeft" | "center"
- Defined in src/index.ts:219
set position(value): void
Parameters
- value: undefined | "top" | "right" | "bottom" | "left" | "topLeft" | "topRight" | "bottomRight" | "bottomLeft" | "center"
Returns void
- Defined in src/index.ts:223

radius

get radius(): number
The border radius for the badge (pill).

Returns number
- Defined in src/index.ts:156
set radius(value): void
Parameters
- value: undefined | number
Returns void
- Defined in src/index.ts:160

size

get size(): number
A value between 0 and 1 representing the size of the badge.

Returns number
- Defined in src/index.ts:168
set size(value): void
Parameters
- value: undefined | number
Returns void
- Defined in src/index.ts:172

src

get src(): string
The url to the image we want to draw the badge on.

Returns string
- Defined in src/index.ts:208
set src(value): void
Parameters
- value: undefined | string
Returns void
- Defined in src/index.ts:212

url

get url(): string
The data url for the most recent draw call.

Returns string
- Defined in src/index.ts:232

value

get value(): number
The number to render within the badge.

Returns number
- Defined in src/index.ts:144
set value(value): void
Parameters
- value: undefined | number
Returns void
- Defined in src/index.ts:148

Methods

addListener

addListener<T>(event, fn, context?): this
Type Parameters
- T extends keyof BadgerEvents
Parameters
- event: T
- fn: ((...args) => void)
  - - (...args): void
    - Parameters
      Rest ...args: ArgumentMap<BadgerEvents>[Extract<T, keyof BadgerEvents>]
      Returns void
- Optional context: any
Returns this
Inherited from EventEmitter.addListener
- Defined in node_modules/eventemitter3/index.d.ts:45

emit

emit<T>(event, ...args): boolean
Calls each of the listeners registered for a given event.
Type Parameters
- T extends keyof BadgerEvents
Parameters
- event: T
- Rest ...args: ArgumentMap<BadgerEvents>[Extract<T, keyof BadgerEvents>]
Returns boolean
Inherited from EventEmitter.emit
- Defined in node_modules/eventemitter3/index.d.ts:32

eventNames

eventNames(): (keyof BadgerEvents)[]
Return an array listing the events for which the emitter has registered listeners.

Returns (keyof BadgerEvents)[]
Inherited from EventEmitter.eventNames
- Defined in node_modules/eventemitter3/index.d.ts:15

`Private` getURL

getURL(): string
Returns string
- Defined in src/index.ts:139

listenerCount

listenerCount(event): number
Return the number of listeners listening to a given event.
Parameters
- event: keyof BadgerEvents
Returns number
Inherited from EventEmitter.listenerCount
- Defined in node_modules/eventemitter3/index.d.ts:27

listeners

listeners<T>(event): ((...args) => void)[]
Return the listeners registered for a given event.
Type Parameters
- T extends keyof BadgerEvents
Parameters
- event: T
Returns ((...args) => void)[]
Inherited from EventEmitter.listeners
- Defined in node_modules/eventemitter3/index.d.ts:20

off

off<T>(event, fn?, context?, once?): this
Type Parameters
- T extends keyof BadgerEvents
Parameters
- event: T
- Optional fn: ((...args) => void)
  - - (...args): void
    - Parameters
      Rest ...args: ArgumentMap<BadgerEvents>[Extract<T, keyof BadgerEvents>]
      Returns void
- Optional context: any
- Optional once: boolean
Returns this
Inherited from EventEmitter.off
- Defined in node_modules/eventemitter3/index.d.ts:69

on

on<T>(event, fn, context?): this
Add a listener for a given event.
Type Parameters
- T extends keyof BadgerEvents
Parameters
- event: T
- fn: ((...args) => void)
  - - (...args): void
    - Parameters
      Rest ...args: ArgumentMap<BadgerEvents>[Extract<T, keyof BadgerEvents>]
      Returns void
- Optional context: any
Returns this
Inherited from EventEmitter.on
- Defined in node_modules/eventemitter3/index.d.ts:40

once

once<T>(event, fn, context?): this
Add a one-time listener for a given event.
Type Parameters
- T extends keyof BadgerEvents
Parameters
- event: T
- fn: ((...args) => void)
  - - (...args): void
    - Parameters
      Rest ...args: ArgumentMap<BadgerEvents>[Extract<T, keyof BadgerEvents>]
      Returns void
- Optional context: any
Returns this
Inherited from EventEmitter.once
- Defined in node_modules/eventemitter3/index.d.ts:54

removeAllListeners

removeAllListeners(event?): this
Remove all listeners, or those of the specified event.
Parameters
- Optional event: keyof BadgerEvents
Returns this
Inherited from EventEmitter.removeAllListeners
- Defined in node_modules/eventemitter3/index.d.ts:79

removeListener

removeListener<T>(event, fn?, context?, once?): this
Remove the listeners of a given event.
Type Parameters
- T extends keyof BadgerEvents
Parameters
- event: T
- Optional fn: ((...args) => void)
  - - (...args): void
    - Parameters
      Rest ...args: ArgumentMap<BadgerEvents>[Extract<T, keyof BadgerEvents>]
      Returns void
- Optional context: any
- Optional once: boolean
Returns this
Inherited from EventEmitter.removeListener
- Defined in node_modules/eventemitter3/index.d.ts:63

`Private` setup

setup(): void
Returns void
- Defined in src/index.ts:80

update

update(): void
Returns void
- Defined in src/index.ts:98

Class default

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns default

Properties

Private #canvas

Private #ctx

Private #image

Private #offset

Type declaration

x: number

y: number

Private #options

Private #size

Private #url

Private #value

Static DefaultOptions

Static Offsets

Type declaration

bottom: { x: number; y: number; }

x: number

y: number

bottomLeft: { x: number; y: number; }

x: number

y: number

bottomRight: { x: number; y: number; }

x: number

y: number

center: { x: number; y: number; }

x: number

y: number

left: { x: number; y: number; }

x: number

y: number

right: { x: number; y: number; }

x: number

y: number

top: { x: number; y: number; }

x: number

y: number

topLeft: { x: number; y: number; }

x: number

y: number

topRight: { x: number; y: number; }

x: number

y: number

Static prefixed

Accessors

backgroundColor

Returns string | CanvasGradient | CanvasPattern

Parameters

Returns void

color

Returns string | CanvasGradient | CanvasPattern

Parameters

Returns void

position

Returns "top" | "right" | "bottom" | "left" | "topLeft" | "topRight" | "bottomRight" | "bottomLeft" | "center"

Parameters

Returns void

radius

Returns number

Parameters

Returns void

size

Returns number

Parameters

Returns void

src

Returns string

Parameters

Returns void

url

`Private` #canvas

`Private` #ctx

`Private` #image

`Private` #offset

`Private` #options

`Private` #size

`Private` #url

`Private` #value

`Static` DefaultOptions

`Static` Offsets

bottom: {
x: number;
y: number;
}

bottomLeft: {
x: number;
y: number;
}

bottomRight: {
x: number;
y: number;
}

center: {
x: number;
y: number;
}

left: {
x: number;
y: number;
}

right: {
x: number;
y: number;
}

top: {
x: number;
y: number;
}

topLeft: {
x: number;
y: number;
}

topRight: {
x: number;
y: number;
}

`Static` prefixed

`Private` getURL

`Private` setup