JavaScript
/* The old way! */
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.style.border = "solid 1px black"
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.fillStyle = rgr;
ctx.fillRect(40, 10, 80, 80);
console.log('old way alpha:');
console.log(ctx.getImageData(50, 50, 1, 1).data[3]);
console.log(ctx.getImageData(65, 50, 1, 1).data[3]);
/* The new way! */
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.style.border = "solid 1px black"
canvas.width = 200;
canvas.height = 100;
document.body.appendChild(document.createElement('br'));
document.body.appendChild(canvas);
ctx.shadowOffsetX = 1000; // (default 0)
ctx.shadowOffsetY = 1000; // (default 0)
ctx.shadowBlur = 40; // (default 0)
ctx.shadowColor = 'rgba(0,0,0,0.5)'; // (default transparent black)
ctx.fillStyle = 'rgba(0,0,0,1)'; // transparent black, aka the default pixel state of a canvas
ctx.beginPath();
// 30 instead of 40 seems to get it closer to the size you had it on
ctx.arc(50 - 1000, 50 - 1000, 30, 0, Math.PI * 2, true );
ctx.arc(80 - 1000, 50 - 1000, 30, 0, Math.PI * 2, true );
ctx.closePath();
ctx.fill();
console.log('new way alpha:'); console.log(ctx.getImageData(50, 50, 1, 1).data[3]);
console.log(ctx.getImageData(65, 50, 1, 1).data[3]);