venn3.js

var r1 = 100;
var r2 = 150;
var b = 10;
var w = 2 * (r2 + r1 * Math.cos(Math.PI / 6)) + 2 * b;
var h = r2 * 2 + r1 * (1 + Math.sin(Math.PI / 6)) + 2 * b;

var myCanvas = document.createElement('canvas');
document.body.appendChild(myCanvas);
myCanvas.width = w;
myCanvas.height = h;
var myContext = myCanvas.getContext('2d');
//myContext.globalCompositeOperation = "lighter";

var fillStyles = [];
for (var i=0;i<3;i++) {
    fillStyles.push('rgba(' + [i%3 == 0 ? 255 : 220, i%3 == 1 ? 255 : 220, i%3 == 2 ? 255 : 220].join(',') + ',0.3)');
}

var ox = w / 2;
var oy = r2 + r1 + b;
for (var i=0;i<3;i++) {
    var a = 2 * Math.PI / 3 * i;
    var cx = ox + r1 * Math.sin(a);
    var cy = oy - r1 * Math.cos(a);
    myContext.beginPath();
    myContext.arc(cx,cy,r2,0,2*Math.PI);
    myContext.fillStyle = fillStyles[i];
    myContext.fill();
    //myContext.stroke();
}

for (var i=0;i<3;i++) {
    var a = 2 * Math.PI / 3 * i;
    var cx = ox + r1 * Math.sin(a);
    var cy = oy - r1 * Math.cos(a);
    myContext.beginPath();
    myContext.arc(cx,cy,r2,0,2*Math.PI);
    myContext.stroke();
}