fireworks on a transparent background with canvas
HTML
<script src="http://www.a-jie.cn/proton/build/proton-1.0.0.min.js"></script>
<script src="http://www.a-jie.cn/proton/example/lib/stats.min.js"></script>
<canvas id="testCanvas" width="758" height="719"></canvas>
CSS
canvas{
background:url(http://lorempixel.com/output/758/719/);
}
JavaScript
var lighten = (function () {
var bgcan = document.createElement('canvas');
return function (can) {
bgcan.width = can.width;
bgcan.height = can.height;
bgcan.getContext('2d').drawImage(can, 0, 0);
can.width = can.width;
// this is where you have to draw the image behind the fireworks again or erase the canvas that is positioned on top of the
can.getContext('2d').globalAlpha = 0.9;
can.getContext('2d').drawImage(bgcan, 0, 0);
can.getContext('2d').globalAlpha = 1;
};
})();
var canvas;
var context;
var proton;
var renderer;
var emitter;
var stats;
Main();
function Main() {
canvas = document.getElementById("testCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context = canvas.getContext('2d');
//context.globalCompositeOperation = "lighter";
addStats();
createProton();
tick();
}
function addStats() {
stats = new Stats();
stats.setMode(2);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
}
function createProton(image) {
proton = new Proton;
emitter = new Proton.Emitter();
emitter.rate = new Proton.Rate(new Proton.Span(1, 3), 1);
emitter.addInitialize(new Proton.Mass(1));
emitter.addInitialize(new Proton.Radius(2, 4));
emitter.addInitialize(new...