HTML5 Canvas Bubble Demo V2

The HTML Canvas Bubble Demo got a lot of attention and I received a lot of hits from that. Since last year, I used it on a WP theme and updated it to make it more functional.

So here is a link to the NEW demo.


Here is a link to download all the files, including the demo

When using it on your own site, create a DOM element with the ID “canvasBubbles”, include the “bubbles.js” script :

Basic Usage

1
2
3
<script>
   bubblesMain();
</script>

Custom Options (Example)

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    bubblesMain(new Object({
        type : 'radial',
        revolve : 'center',
        minSpeed : 100,
        maxSpeed : 500,
        minSize : 50,
        maxSize : 150,
        num : 100,
        colors : new Array('#FF0000','#FFFFFF','#BBBBBB')
    }));
</script>
  • type (linear,radial)
  • revolve (topLeft, topRight, bottomLeft, bottomRight) This is used when “type” is radial
  • opacity (any floating number between 0 and 1)
  • minSpeed (any number)
  • maxSpeed (any number)
  • minSize (any number)
  • maxSize (any number)
  • num (number of bubbles)
  • colors (an array of 6 digit HEX colors)

5 thoughts on “HTML5 Canvas Bubble Demo V2

  1. Pingback: HTML5 canvas floating bubbles | HostGrenade Blog

  2. Hey I love this! Thanks!

    But do you knowif there is a way to make it work in a .html file? Been struggling with out any progress.

    • I’m glad you like it. It should work with all PHP removed, you’ll have to set the variables manually though. You could also parse PHP inside HTML files or rewrite your .html file with the .php extension if possible.

    • Yes,
      I believe you can use :

      var img= new Image();
      img.src = “path/file.jpg”;
      ctx.drawImage(img,X,Y,width,height);

      You should use img.onload to ensure that the image is loaded before applying them to the canvas. If you’re just using images, it might be worth it to just build something that moves images around like jQuery animate.

Leave a Reply to Mike DiDomizio Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>