Skip to content

Instantly share code, notes, and snippets.

@hostsamurai
Created July 1, 2011 16:54
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save hostsamurai/1058931 to your computer and use it in GitHub Desktop.
Save hostsamurai/1058931 to your computer and use it in GitHub Desktop.
Light flickering effect using html5 canvas and JavaScript
<canvas width=220 height=150></canvas>
var canvas = $('canvas')[0];
if (canvas.getContext) {
var ctx = canvas.getContext('2d'),
w = canvas.width,
h = canvas.height
x1 = 70, // x-coordinate of first circle
y1 = 75, // y-coordinate of first circle
x2 = 145, // x-coordinate of second circle
y2 = y1; // y-coordinate of second circle
function init () {
setInterval(draw, 100);
}
function frameBuffer () {
var buffer = document.createElement('canvas');
buffer.width = canvas.width;
buffer.height = canvas.height;
var bufferContext = buffer.getContext('2d');
var radgrad = bufferContext.createRadialGradient(x1, y1, 50, x1, y1, 40);
var radgrad2 = bufferContext.createRadialGradient(x2, y2, 145, 50, y2, 40);
bufferContext.fillStyle = "rgba(0,0,0,1)";
bufferContext.fillRect(0, 0, w, h);
bufferContext.save();
bufferContext.globalCompositeOperation = "destination-out";
// add ellipses
bufferContext.beginPath();
bufferContext.arc(x1, y1, 50, 0, Math.PI * 2, true);
bufferContext.arc(x2, y2, 50, 0, Math.PI * 2, true);
bufferContext.shadowBlur = 20;
bufferContext.shadowColor = "black";
radgrad.addColorStop(0, "rgba(0,0,0,0.1)");
radgrad.addColorStop(0.2, "rgba(0, 0, 0, " + (Math.random() + 0.2) + ")");
radgrad.addColorStop(0.8, "rgba(0,0,0," + (Math.random() + 0.8) + ")");
radgrad.addColorStop(1, "rgba(0,0,0,1)");
radgrad2.addColorStop(0, "rgba(0,0,0,0.1)");
radgrad2.addColorStop(0.2, "rgba(0, 0, 0, " + (Math.random() + 0.2) + ")");
radgrad2.addColorStop(0.8, "rgba(0,0,0," + (Math.random() + 0.8) + ")");
radgrad2.addColorStop(1, "rgba(0,0,0,1)");
bufferContext.fillStyle = radgrad;
bufferContext.fill();
bufferContext.fillStyle = radgrad2;
bufferContext.fill();
bufferContext.restore();
return buffer;
}
function draw () {
var buffer = frameBuffer();
ctx.clearRect(0, 0, w, h);
ctx.drawImage(buffer, 0, 0);
}
init();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment