JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='canvas' width='200' height='200'></canvas>

CSS

#canvas {
    background-image: url(http://i.telegraph.co.uk/multimedia/archive/02830/cat_2830677b.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

JavaScript

var cutoutCircle = function(x, y, r, ctx){
  ctx.save()
  ctx.arc(x, y, r, 0, Math.PI * 2, false) 
  ctx.clip()
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
  ctx.restore();
}

var myCircles = [{x: 75, y: 100, r: 50}, {x: 125, y: 100, r: 50}], 
    ctx = document.getElementById("canvas").getContext('2d');

ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for (var i=0; i<myCircles.length; i++){
  cutoutCircle(myCircles[i].x, myCircles[i].y, myCircles[i].r, ctx)
}