spotlight-canvas

Class: Spotlight

Spotlight

spotlight-canvas: a canvas element that dims the screen except for spotlight locations formed by circles or polygons

new Spotlight (options)

spotlight.js:6

create a spotlight div

Name Type Description
options object optional
Name Type Default Description
x number 0 optional

use to place layer on creation
y number 0 optional
width number window.innerWidth optional
height number window.innerHeight optional
color number black optional

color of under layer
alpha number 0.5 optional

alpha of under layer
parent HTMLElement document.body optional

parent of spotlight layer

Members

openings Array.<object>

the list of spotlights. if manually changed then call redraw() to update the canvas

Methods

circle (x, y, radius, noRedraw)Spotlight

spotlight.js:127

adds a circle spotlight

Name Type Description
x number
y number
radius number
noRedraw boolean optional

don't force a canvas redraw
Returns:
Type Description
Spotlight

clear (noRedraw)Spotlight

spotlight.js:109

clears any cutouts

Name Type Description
noRedraw boolean optional

don't force a canvas redraw
Returns:
Type Description
Spotlight

destroy ()

spotlight.js:278

removes spotlight

fadeIn (options)Spotlight

spotlight.js:209

fade in the under layer

Name Type Description
options * optional
Name Type Default Description
start number 0 optional

starting opacity
end number 1 optional

ending opacity
duration number 1000 optional

duration of fade in milliseconds
ease string | function 'easeInOutSine' optional

easing function (@see https://www.npmjs.com/package/penner)
onEnd function optional

callback after fading
Returns:
Type Description
Spotlight

fadeOut (options)Spotlight

spotlight.js:237

fade out the under layer

Name Type Description
options * optional
Name Type Default Description
start number 1 optional

starting opacity
end number 0 optional

ending opacity
duration number 1000 optional

duration of fade in milliseconds
ease string | function 'easeInOutSine' optional

easing function (@see https://www.npmjs.com/package/penner)
onEnd function optional

callback after fading
Returns:
Type Description
Spotlight

hide ()Spotlight

spotlight.js:260

hide spotlight

Returns:
Type Description
Spotlight

isVisible ()boolean

spotlight.js:270

checks whether spotlight is visible

Returns:
Type Description
boolean

polygon (points, noRedraw)Spotlight

spotlight.js:161

adds a polygon spotlight

Name Type Description
points Array.<number>

[x1, y1, x2, y2, ... xn, yn]
noRedraw boolean optional

don't force a canvas redraw
Returns:
Type Description
Spotlight

rectangle (x, y, width, height, noRedraw)Spotlight

spotlight.js:145

adds a rectangle spotlight

Name Type Description
x number
y number
width number
height number
noRedraw boolean

don't force a canvas redraw
Returns:
Type Description
Spotlight

redraw ()Spotlight

spotlight.js:62

force a redraw of the spotlight (usually called internally)

Returns:
Type Description
Spotlight

resize ()Spotlight

spotlight.js:48

resize the layer to ensure entire screen is covered; also calls redraw()

Returns:
Type Description
Spotlight

show ()Spotlight

spotlight.js:250

show spotlight

Returns:
Type Description
Spotlight