Canvas And jQuery Based Dynamic Background Effects - MagicCanvas

MagicCanvas is a jQuery plugin which utilizes Canvas and requestAnimationFrame to create fancy interactive effects on your background.

How to use it:

1. Include the needed jQuery library and magic-canvas.js script on your webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="magic-canvas.min.js"></script>

2. Add a background image to your webpage (Optional).

<canvas id="reactive-bg-canvas"></canvas>

3. Create an HTML5 canvas in your webpage.

body {
  background: url("bg.jpg") no-repeat;
  background-size: cover;
}

4. Create a random particle effect on the canvas. Requires GSAP's TweenLite.js

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>

$.magicCanvas.draw({
  type:"random-move",
  rgb : function (circlePos) {
    var px = circlePos.x; // point position
    var py = circlePos.y;
    // do some computation....
    return {r:parseInt(px % 255),g:parseInt(py % 255),b:203};
  },
  zIndex = -9999; // stack order
})

5. Create a heart beat effect on the canvas that interacts with your mouse.

$.magicCanvas.draw({
  lineLen : 30, // length of hive's side
  heartBeatCD : 3000, // boom period
  heartBeatRange : 300, // boom range
  rgb : function (circlePos, heartBeatCenter) {
      var px = circlePos.x; // a point on boom circle
      var py = circlePos.y;
      var hbcx = heartBeatCenter.x;
      var hbcy = heartBeatCenter.y;

      var dis = Math.pow((px - hbcx), 2) + Math.pow((py - hbcy), 2);
      var maxDis = 300 * 300;

      var r = parseInt(255 * dis / maxDis);
      // do some computation....
      return {r:r,g:217,b:203};
  },
//  rgb: {r:156,g:217,b:249}; // parameter rgb can be a object as well
  zIndex:-9999 // stack order
})

6. All default settings.

$.magicCanvas.draw({
  lineLen: 30,
  heartBeatCD: 3000,
  heartBeatRange: 300,
  rgb: {r: 156, g: 217, b: 249},
  type: "heart-beat",
  zIndex: -99999
})

---

This awesome jQuery plugin is developed by decaywood. For more Advanced Usages, please check the demo page or visit the official website.