Estoy tratando de construir una mesa de blackjack interactiva con fichas y botones de juego. En lugar de dibujar las fichas individualmente, quería dibujar un círculo, colocar la imagen de la ficha dentro y recortar el resto de la imagen.

 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; }

He estado tratando de evitar hacer las mismas líneas de código para los 8 chips requeridos diferentes, pero la función tiene un uso único por alguna razón.

jsfiddle