HTML5 Canvas play around to create shooting stars effect
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Shooting stars is an experiment with creating particle rendering systems with the HTML5 Canvas.

You can see a demo of this at

I wanted to create something simple instead of using CSS animations on DOM element as I was previously with a different implementation.

This isn't a released piece of code but if you're interested in playing with it you can by importing the shooting-stars.js file into your page and then adding something like the following code to your javascript.

  var config = {
    id: 'app',
    particleLife: 300,
    particleRenderProbability: 0.5,
    amount: 50,
    resizePoll: 250,
    star: {
      size: {
        upper: 50,
        lower: 25
      rotateLimit: 90,
      points: 5,
      innerRadius: 0.5,
      borderColor: '#000',
      fillColor: 'red',

  myCanvas = new ShootingStars(config);

This relies on there being a canvas element in your DOM with the ID app. You can of course change this as long as that canvas element exists.

I'm just passing in a config to the function and the options included are as follows

  • id: string - the ID of the canvas element to be used.
  • particleLife: int - the lifespan of each star in frames.
  • particleRenderProbability: int - the probability of rendering a new particle in each frame if the amount limit hasn't been reached (must be from 0 - 1, eg. 0.95).
  • amount: int - the amount of stars to be rendered on the canvas.
  • resizePoll: int - the amount of ms for canvas to debounce resizing on viewport resize.
  • star: obj - defines characteristics of stars that are rendered.
    • size: obj - defines the upper and lower bound size of the star in pixels.
      • upper: int - defines the upper bound size.
      • lower: int - defines the lower bound size.
    • rotateLimit: int - defines the maximum rotation that stars will make during render.
    • points: int - defines the number of points that a star will have.
    • innerRadius: float - defines the size of the inner radius of the star. For example; an inner radius of 0.5 means that the inner radius will be (starSize / 2) * 0.5.
    • borderColor: string - defines the border color. Can be any valid CSS color representation.
    • fillColor: string - defines the fill color. Can be any valid CSS color representation.

##Contributing If you'd like to get involved or have any issues with the implementation or need some pointers feel free to leave an issue or tweet me @_jh3y!

##License MIT

@jh3y 2015