Click for more examples

Sponsored by

Getting Started

You can use starback.js directly with <script> tag or import syntax.

With <script> tag

# Using CDN
<script src="https://unpkg.com/starback@2.1.1/dist/starback.global.js"></script>
# Using downloaded files
<script src="PATH_TO_YOUR_DIST_FOLDER/starback.js"></script>

With import

Install via NPM first:

npm install starback

and then

import Starback from 'starback'

Example Usage

<canvas id="canvas"></canvas>
<script src="PATH_TO_DIST_FOLDER/starback.js"></script>
<script>
  const canvas = document.getElementById('canvas')
  const starback = new Starback(canvas, {
      type: 'dot',
      quantity: 100,
      direction: 225,
      backgroundColor: ['#0e1118', '#232b3e'],
      randomOpacity: true,
  })
</script>

You can check the more options in Options section

Options

Key	Type	Description	Required	Default Value
type	String	Required. Star type to use. The values are 'dot' or 'line'	true
width	Number	Canvas width to set	no	800
height	Number	Canvas height to set	no	600
backgroundColor	String\|Array	Color of the background, use string for solid color, or array of colors for linear gradient	no	#ccc
quantity	Number	Number of stars to show	no	100
showFps	Boolean	Show FPS on the top left screen	no	false
speed	Number	Star speed	no	0.5
starSize	Number\|Array	Use number for fixed star size. Use [minSize, maxSize] value for random the size within the range	no	[0, 3] for `type: dot`, 100 for `type: line`

Additional options for `type: 'dot'`

Key	Type	Description	Required	Default Value
direction	Number	Use 360 degree to set the direction	no	225
randomOpacity	Boolean\|Array	If `true`, random star will get random opacity. Use array [minOpacity, maxOpacity] to limit the random opacity	no	false
starColor	String	Color of the stars, you can use `rgb` or `hex` like css color.	no	white

Additional options for `type: 'line'`

Key	Type	Description	Required	Default Value
directionY	Number	The direction the star to move vertically (1 = to bottom, 0 = to top)	no	1
directionX	Number	The direction the star to move vertically (1 = to right, 0 = to left)	no	1
distanceX	Number	Distance horizontally the star should reaching at	no	0.1
frequency	Number	The frequency of star will be rotated	no	10
slope	Object	The quadraticCurve coordinate that will be applied to stars. Read MDN	no	{x: 1, y: 1}
starColor	String\|Array	Color of the stars, use string for solid color, or array of colors for linear gradient	no	['#fb00ff', '#00dde0']
spread	Number	The spread level of the stars	no	1

Methods

Name	Parameter	Description
`generateStar(amount)`	amount: number	The quantity of stars that will be shown
`addToFront(callback(ctx))`	function(ctx: CanvasRenderingContext2D)	Add to front of the falling star by given context
`addToBehind(callback(ctx))`	function(ctx: CanvasRenderingContext2D)	Add to back of the falling star by given context

Example method usage: adding image to front

let starback = new Starback(canvas, options)
let mountainImage = new Image()
mountainImage.src = 'images/mountain.png'
mountainImage.onload = () => {
  starback.addToFront((ctx) => {
    ctx.drawImage(
      mountain,
      0,
      0,
      mountain.width,
      mountain.height,
      0,
      canvas.height - mountain.height,
      canvas.width,
      mountain.height
    )
  })
}

Contributing

You can contribute to this repository. See CONTRIBUTING.md

Donate

If you have used this library and it's useful for you, please consider to donate:

Ko-fi | Trakteer

License

This library is under MIT license.