Ahora estoy creando una ruleta personalizada, y los jugadores pueden ingresar el texto que quieran. cuando hago clic en el botón, la función renderRoulette funciona. Y este es el contexto interno de la función renderRoulette

 rouletteCanvas.style.display = "block"; // the initial state of rouletteCanvas's display is 'none' // #customize elements are the inputs of the text that users made. let customize = document.querySelectorAll("#customize"); let len = customize.length; const canvas = document.querySelector(".roulette-panel"); // I want to draw here. let width = canvas.width; let height = canvas.height; const ctx = canvas.getContext("2d"); // ctx Initialization ctx.clearRect(0, 0, width, height); const devide = len; const degree = 360; const goalDegree = 270 + degree / devide; for (let i = 0; i < devide; i++) { let json = { first: (degree / devide) * i, last: (degree / devide) * (i + 1), text: `${i + 1}`, }; data.push(json); } // Draw a circular sector data.forEach((item) => { ctx.save(); ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = "gray"; ctx.moveTo(width / 2, height / 2); ctx.arc( width / 2, height / 2, width / 2, degreesToRadians(item.first), degreesToRadians(item.last), false ); ctx.closePath(); ctx.stroke(); ctx.restore(); ctx.save(); let half = Math.abs(item.first - item.last) / 2; let degg = item.first + half; let xx = ((Math.cos(degreesToRadians(degg)) * width) / 2) * 0.7 + width / 2; let yy = ((Math.sin(degreesToRadians(degg)) * width) / 2) * 0.7 + height / 2; let minus = ctx.measureText(item.text).width / 2; ctx.font = "bold 15px sans-serif"; ctx.fillText(item.text, xx - minus, yy); ctx.restore(); });

Cada vez que hago clic en el botón, quiero eliminar todas las formas de sectores circulares dibujadas previamente y volver a dibujarlas, así que utilicé el código ctx.clearRect(0, 0, ancho, alto); . Sin embargo, incluso si hace clic en el botón después, se dibujará sobre la imagen existente. ¿Cómo lo inicializo?