Venn diagram canvas

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width = 800,
      height = 600;

var canvas = d3.select('body')
      .append('canvas')
      .attr('width', width)
      .attr('height', height);
    
		var context = canvas.node().getContext('2d');
    
    var r = 100;
    
    context.clearRect(0, 0, width, height);
    context.globalAlpha = 0.5
    
    context.fillStyle = 'red';
    context.beginPath();
    context.arc(150, 150, r, 0, 2*Math.PI);
    context.fill();
    
    context.fillStyle = 'green';
    context.beginPath();
    context.arc(250, 150, r, 0, 2*Math.PI);
    context.fill();
    
    context.fillStyle = 'blue';
    context.beginPath();
    context.arc(200, 250, r, 0, 2*Math.PI);
    context.fill();
    
  </script>
</body>

https://d3js.org/d3.v4.min.js