JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var can2 = document.createElement('canvas');
can2.width = can.width;
can2.height = can.height;
var ctx2 = can2.getContext('2d');

var img = new Image();

img.onload = function() {

    ctx.drawImage(img, 0, 0); // background simulation
    drawOnOtherCanvas();
    ctx.drawImage(can2, 0, 0);
}

img.src = 'http://placekitten.com/500/500';


function drawOnOtherCanvas() {
    ctx2.lineWidth = 25;
    ctx2.beginPath();
    ctx2.moveTo(0,0);
    ctx2.quadraticCurveTo(50,50,79,180);
    ctx2.quadraticCurveTo(100,250,179,180);
    ctx2.stroke();
    
    ctx2.globalCompositeOperation = 'destination-out'
    ctx2.lineWidth = 20;
    ctx2.stroke();
}