HTML5 Effects: A canvas based rotating StarBurst effect - StarBurst.js

Written by Richard Heyes, on 25th June 2017

This is an example of a canvas based rotating StarBurst background effect.

Here's an example of a canvas based rotating StarBurst effect that you could use as the background for photos. It's very configurable and there are numerous examples of its use linked below. Here's an example of it rotating nicely behind a photo of my car.*

[No canvas support]

Feel free to use it for whatever you wish. It's probably best suited to some sort of photo gallery though.

Get the source code here. Simply include the code in your page and call the StarBurst() function as shown in the examples.

    // Start the drawing going and pass it an object of options.
    // One of these options can be a callback that's called on
    // every frame.
        id: 'cvs',
        segments: 50,
        colors: ['white', 'red'],
        image: '/images/ferrari.jpg',
        imageHalign: 'center',
        imageValign: 'center',
        imageScale: 1,
        imageShadow: true,
        imageShadowOffsetx: 0,
        imageShadowOffsety: 0,
        imageShadowBlur: 50,
        imageShadowColor: '#aaa',

* Not really. Mines black.

Examples of usage

A basic StarBurst example.
Not much to say about this. It shows the StarBurst code being used at its most basic - with no options specified.

A StarBurst example using a callback function.
This page shows a StarBurst example using a callback function which gets called on every frame. The callback function is simple and is passed an object that consists of the configuration.

A StarBurst example using an image.
Like above - this page shows a StarBurst example using an image.


canvasThe canvas tag object (as returned by document.getElementById() ). You need to give this, the context or the id options.null
contextThe context of the canvas as returned by the getContext() function. You need to give either this, the canvas or the id options.null
idInstead of the canvas or context objects you can give this and the StarBurst function will get the canvas using the document.getElementById() function. You need to give this, the context or the canvas options.null
radiusThe radius of the segments.500
delayThe delay used by the setTimeout() function. Smaller values will result in a faster animation. NOTE: By default the animation will use the newer requestAnimationFrame() function which does not use a user-specified delay - by setting this to a number you will cause the animation to use the setTimeout() function instead.null
segmentsThe number of segments that are drawn.12
cxThe center X coordinate.The horizontal center.
cyThe center Y coordinate.The vertical center.
radiusMultiplierIf this is less than one the rotating arms will grow outwards.1
radiusIncrementThis stipulates how fast the radiusMultiplier will grow.0.1
colorsThis can be a string consisting of a single color, an array consisting of a single color, or an array consisting of any number of colors to be used in the gradient. If you want solid colors then you could do this: ['red', 'red']['white', '#666']
callbackOptionally you can specify a callback function that's run at the end of each frame. The callback is passed the options that you give to the StarBurst function. The callback function runs at the end of each frame and as a result it may run up to 60 times a second.null


imageThe image to show in the center (if desired).null
imageGrowThis stipulates over how many frames the image will grow to the desired scale.0 (disabled)
imageScaleIf specified this stipulates by how much the image is scaled up (ie 2x/3x/4x/5x etc).1
imageHalignThe horizontal alignment of the
imageValignThe vertical alignment of the
imageXIf you want to you can specify the exact X coordinate of the image.null
imageYIf you want to you can specify the exact Y coordinate of the image.null
imageShadowEnable this if you want the image to have a shadow.false
imageShadowOffsetxThe X offset of the shadow.null
imageShadowOffsetyThe Y offset of the shadow.null
imageShadowColorThe color of the shadow.null
imageShadowBlurThe extent of the blurring effect for the shadow.null