So what happens is my clear_one and clear_two functions do not work I checked the error with chrome dev tools and it throws an error:

'ctx' is not defined

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>

Please help me out

CodePudding user response：

I think your problem is a simple error because the context. Your variables ctx and ctx_two starting and end on function scope;

I suggest you declare your variables out your functions (is not the best approach, but with the time, you can get better ways)

A link about variables and yours scopes:

CodePudding user response：

The reason nothing is happening is because:

1. You forgot to call the function(s)
2. The canvas has not been created
3. fillcolor_one,radius_one,fillcolor_two, and radius_two are not defined
4. You cannot stroke and fill at the same time.
5. Variables are not in global scope.( explained below )

Global scope and function scope. In js, there is the concept of scope. Any variable declared in a function will not work outside of it. E.g

function yay(){
    var text = 'I love js!'
}
yay()
console.log(text)

will not work as the variable text is in function scope , but

var text = 'I like js!'
function yay(){
    text = 'I love js!'
}
console.log(text)

will work as text is in global scope, and will output I love js

Here is a working fiddle

Tip: Use var or let to declare variables