Bokeh Background Effect

This is a nice bokeh background effect that can be applied to any HTML5 canvas element. It’s a JS class that is extremely easy to use and makes a really cool effect. You can see the demo and download the package below.

View DemoDownload It


How to Use

The download comes with a demo file that makes things pretty easy. But just for fun I’ll explain it here too.

First, you gotta have a canvas element. Then you make a new instance of the CanvasBokehBackground class and pass it that canvas element. That’s pretty much it. You can also pass 2 more parameters for how many circles and particles (respectively) get used (which controls how dense it is).

<!DOCTYPE html>
<html>
    <head>
        <title>Canvas Bokeh Background Effect Demo</title>
        <!-- requires both easeljs and tweenjs imported -->
        <script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
        <script src="https://code.createjs.com/tweenjs-0.6.1.min.js"></script>
        <script src="canvasbokehbackground.js"></script>
    </head>
    <body>
        <canvas id="demo" width="500" height="300"></canvas>
        <script>
        var myCanvas = document.getElementById('demo');
        var bgEffect = new CanvasBokehBackground(myCanvas, 20, 70);
        </script>
    </body>
</html>

You can pass those arguments to the constructor, or you can call intance.initialize() after instantiation and pass them then. The 2nd and 3rd parameters are optional, and will default to 35 and 100 respectively.