Skip to content

Instantly share code, notes, and snippets.

@pa7
Created April 6, 2012 03:25
Show Gist options
  • Save pa7/2316563 to your computer and use it in GitHub Desktop.
Save pa7/2316563 to your computer and use it in GitHub Desktop.
Playing around with globalCompositeOperation for an upcoming heatmap.js fix
var composites = [
'source-over','source-in','source-out','source-atop',
'destination-over','destination-in','destination-out','destination-atop',
'lighter','darker','copy','xor'
];
for(var i = 0; i < composites.length; i++){
(function(comp){
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 100;
document.body.appendChild(canvas);
var rgr = ctx.createRadialGradient(50, 50, 0, 50, 50, 40);
rgr.addColorStop(0, 'rgba(0,0,0,0.5)');
rgr.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = rgr;
ctx.fillRect(10, 10, 80, 80);
var rgr = ctx.createRadialGradient(80, 50, 0, 80, 50, 40);
rgr.addColorStop(0, 'rgba(0,0,0,0.5)');
rgr.addColorStop(1, 'rgba(0,0,0,0)');
ctx.globalCompositeOperation = comp;
ctx.fillStyle = rgr;
ctx.fillRect(40, 10, 80, 80);
})(composites[i]);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment