I'm trying to build an interactive blackjack table with chips and play buttons. Instead of drawing the chips individually, I wanted to draw a circle, put the image of the chip inside, and crop the rest of the picture.

function getMousePos(canvas, event) {
    let button = canvas.getBoundingClientRect();
    return {
        x: event.clientX - button.left,
        y: event.clientY - button.top
    };
}

function isInside (pos, button) {
    return pos.x > button.x && pos.x < button.x+button.width && pos.y < button.y+button.height && pos.y > button.y
}


function draw() {
    const canvas = document.getElementById('bjGame');
    const width = canvas.width = window.innerWidth-40;
    const height = canvas.height = window.innerHeight-40;
    if (canvas.getContext) {
        const ctx = canvas.getContext('2d');
        let chip1 = new Image();
        let chip5 = new Image();

        //Background
        ctx.fillStyle = "rgba(29,129,36,0.71)";
        ctx.fillRect(0, 0, width, height);

        //This works-
        createChip(ctx, chip1, 300, 300, "images/chip1.png");

        //But once I add this line of code it completely breaks
        createChip(ctx, chip5, 100, 100, "images/chip5.png")


    }
}

function createChip(ctx, chip, x, y, imgSrc) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.arc(x, y, 40, 0, 2*Math.PI);
    ctx.clip();

    chip.addEventListener('load', ()=> {
        ctx.drawImage(chip, 30, 11, 100, 100, x-40, y-40, 80, 80);
    }, false);

    chip.src = imgSrc;
}

I've been trying to avoid making the same lines of code for the 8 different required chips but the function has a one-time-use for some reason.

jsfiddle