Entonces, en mi código Javascript quiero mantener algunos botones y cuando hago clic en ellos aparecerá un círculo mediano, grande o pequeño y para esto necesito borrar el lienzo antes de agregar un nuevo círculo. Por ejemplo yo he hecho un círculo mediano y quiero hacer uno pequeño, para esto necesito despejar el círculo mediano antes para poder hacer el círculo pequeño o sino se superpondrá. El lienzo debe borrarse cuando hago clic en el botón. clearRect() no funciona correctamente, también elimina los botones, no sé cuál es el problema. Por favor ayuda :)
function Circle(r){ let canvas = document.getElementById("MyCanvas"); let ctx = canvas.getContext("2d"); // the line below fixes the issue (not part of OP's question) // ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(350, 160, r, 0, 2 * Math.PI); ctx.strokeStyle = "#FF0000"; ctx.fillStyle = fillcolor; ctx.stroke(); ctx.fill(); } var fillcolor = 'green' //large = 140 //med = 100 //small = 70 var btn_med = document.createElement("button"); btn_med.innerHTML = "Submit"; btn_med.type = "submit"; btn_med.name = "btn_med"; btn_med.innerText = "Medium"; btn_med.onclick = () => Circle(100); var btn_small = document.createElement("button"); btn_small.innerHTML = "Submit"; btn_small.type = "submit"; btn_small.name = "btn_small"; btn_small.innerText = "Small"; btn_small.onclick = () => Circle(70); var btn_large = document.createElement("button"); btn_large.innerHTML = "Submit"; btn_large.type = "submit"; btn_large.name = "btn_large"; btn_large.innerText = "Large"; btn_large.onclick = () => Circle(140); document.body.appendChild(btn_med); document.body.appendChild(btn_small); document.body.appendChild(btn_large); <div id="outer"> <canvas id="MyCanvas" /> </div>