svg canvas clip-path

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    .box {
    display: flex;
  }

svg,
  canvas {
    border: 1px solid gray;
    margin-right: 1em;
    cursor: crosshair;
    display: block;
  }
  circle {
    fill: rgba(250,0,0,0.3);
  }
  text {
    fill: tomato;
  }
  </style>
</head>

<body>
  
<div class="box">
<svg width="400" height="300">
  <defs>
    <clipPath id="cp">
      <circle cx="200" cy="150" r="80" />
    </clipPath>
  </defs>
</svg>  
  
<canvas width="400" height="300"></canvas>  
</div>  
  
  
<script>
  
var clip = {x: 200, y: 150, r: 80},
    svg = d3.select("svg"),
    circle = svg.select("defs circle"),
    
    canvas = d3.select("canvas"),
    ctx = canvas.node().getContext("2d"),
    w = 400, h = 300;

var data = d3.range(80).map(function (d) {
  return {
    x: Math.floor(Math.random() * 400),
    y: Math.floor(Math.random() * 300),
    r: Math.floor(Math.random() * 10 + 3)
  }
});

function onMouseMove () {
  var m = d3.mouse(this);
  clip.x = m[0], clip.y = m[1];
  circle.attr("cx", m[0]).attr("cy", m[1]);
  cavnasDraw();
}

svg.on("mousemove", onMouseMove);
canvas.on("mousemove", onMouseMove);

var g = svg.append("g")
.attr("clip-path", "url(#cp)");

g.append("rect")
  .attr("width", 400)
  .attr("height", 300)
  .attr("fill", "rgba(0,0,0,0.1)");

g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => d.r);

g.append("text")
.attr("x", 20)
.attr("y", 150)
.attr("font-size", 50)
.text("SVG Clip Path");

function cavnasDraw () {
  ctx.save();
  ctx.clearRect(0, 0, w, h);
  
  ctx.beginPath();
  ctx.arc(clip.x, clip.y, clip.r, 0, Math.PI * 2, false);
  ctx.clip();
  
  ctx.fillStyle = "rgba(0,0,0,0.1)";
  ctx.fillRect(0, 0, w, h);
  
  var i = 0, length = data.length, c = data[i];
  ctx.fillStyle = "rgba(250,0,0,0.4)";
  while (i < length) {
    ctx.beginPath();
    ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2, false);
    
    i++;
    c = data[i];
    ctx.fill();
  }
  
  ctx.fillStyle = "tomato";
  ctx.font = "50px serif";
  ctx.fillText("SVG Clip Path", 20, 150);
  
  ctx.restore();
}

cavnasDraw();
  
</script>
</body>

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