Entonces, lo que sucede es que mis funciones clear_one y clear_two no funcionan. Verifiqué el error con las herramientas de desarrollo de Chrome y arroja un error:
'ctx' no está definido
function Circle_one() { let canvas = document.getElementById("MyCanvas_one"); const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(350, 160, radius_one, 0, 2 * Math.PI); ctx.strokeStyle = "#c3c3c3"; ctx.fillStyle = fillcolor_one; ctx.stroke(); ctx.fill(); fillcolor = 'red'; } function Circle_two() { let canvas = document.getElementById("MyCanvas_two"); const ctx_two = canvas.getContext("2d"); ctx_two.clearRect(0, 0, canvas.width, canvas.height); ctx_two.beginPath(); ctx_two.arc(350, 160, radius_two, 0, 2 * Math.PI); ctx_two.strokeStyle = "#c3c3c3"; ctx_two.fillStyle = fillcolor_two; ctx_two.stroke(); ctx_two.fill(); fillcolor = 'red'; } //clear-- function clear_one() { ctx.clearRect(0, 0, canvas.width, canvas.height) } function clear_two() { ctx_two.clearRect(0, 0, canvas.width, canvas.height) } <span id="span_clear_one"> <button style="background-color: #e4e1d4;width:70px; height:60px;" name='clear_one' type ="button" onclick= "clear_one()"><img src="https://img.myloview.com/stickers/delete-remove-symbol-garbage-bin-dustbin-icon-delete-symbols-for-perfect-mobile-and-web-ui-design-black-trash-can-icon-isolated-on-white-background-office-trash-icon-vector-illustration-700-198973179.jpg" width="55px"></button> </span> <span id="span_clear_two"> <button style="background-color: #e4e1d4;width:70px; height:60px;" name='clear_two' type ="button" onclick= "clear_two()"><img src="https://img.myloview.com/stickers/delete-remove-symbol-garbage-bin-dustbin-icon-delete-symbols-for-perfect-mobile-and-web-ui-design-black-trash-can-icon-isolated-on-white-background-office-trash-icon-vector-illustration-700-198973179.jpg" width="55px"></button> </span>Por favor, ayúdame
La razón por la que no pasa nada es porque:
Ámbito global y ámbito funcional. En js, existe el concepto de alcance. Cualquier variable declarada en una función no funcionará fuera de ella. P.ej
function yay(){ var text = 'I love js!' } yay() console.log(text)no funcionará ya que el texto variable está en el alcance de la función, pero
var text = 'I like js!' function yay(){ text = 'I love js!' } console.log(text) funcionará ya que el texto está en el ámbito global, y generará I love js
Aquí hay un violín que funciona
Creo que su problema es un simple error debido al contexto. Sus variables ctx y ctx_two comienzan y terminan en el alcance de la función;
Le sugiero que declare sus variables fuera de sus funciones (no es el mejor enfoque, pero con el tiempo, puede obtener mejores formas)
Un enlace sobre variables y sus alcances: