Home Create canvas element when clicking on one element then click on that element

Questions

Create canvas element when clicking on one element then click on that element

June 25, 2023

I click on the green circle to create a canvas element, a yellow circle, but when I create the isPointinPath variable with the if-statement, I get an error. I want to create a new element once a I click on the green circle and I want to be able to click on that new element. So far, I can only create it. How do I make it clickable? Are there other approaches to this?

<!DOCTYPE html\>

<canvas id ="canvas" style="border: solid 5px blue";\>\</canvas\>

    //declare canvas

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 800;

function circle_factory(circle_var, x, y, start, end, color) {

circle_var = new Path2D()
circle_var.arc(x, y, 50, start, end \* Math.PI);
ctx.fillStyle = color;
circle_var.closePath
ctx.fill(circle_var);

}

//circle 2
var circle2 = new Path2D();
circle2.arc(250, 75, 50, 0, 2 \* Math.PI);
ctx.fillStyle = "green";
circle2.closePath
ctx.fill(circle2);

var circle_1 = new circle_factory(circle_1, 510, 75, 0, 2, 'orange')

canvas.addEventListener('click', (event) =\> {

    circle_2_click = ctx.isPointInPath(circle2, event.offsetX, event.offsetY)
    
    if (circle_2_click) {
        var circle_yellow = new circle_factory(circle_yellow, 640, 75, 0, 2, 'yellow')
    
        var circle_yellow_click = ctx.isPointInPath(circle_yellow, event.offsetX, event.offsetY)
    
        if (circle_yellow_click) {console.log('it works')}
    
    }

})

>Solution :

The issue with your code is that you are trying to pass the circle_yellow variable into the circle_factory function as the first argument. However, circle_yellow is not yet defined at that point, so it will be undefined.

One solution is to remove the first argument from the circle_factory function and have it return the created Path2D object. Then, you can assign the returned value to the circle_yellow variable.

<canvas id="canvas" style="border: solid 5px blue"></canvas>

<script>
  //declare canvas
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = 1000;
  canvas.height = 800;

  function circle_factory(x, y, start, end, color) {
    const circle_var = new Path2D();
    circle_var.arc(x, y, 50, start, end * Math.PI);
    ctx.fillStyle = color;
    circle_var.closePath();
    ctx.fill(circle_var);
    return circle_var;
  }

  //circle 2
  const circle2 = circle_factory(250, 75, 0, 2, "green");

  const circle_1 = circle_factory(510, 75, 0, 2, "orange");

  canvas.addEventListener("click", (event) => {
  const circle_2_click = ctx.isPointInPath(circle2, event.offsetX, event.offsetY);

    if (circle_2_click) {
      const circle_yellow = circle_factory(640, 75, 0, 2, "yellow");

      const circle_yellow_click = ctx.isPointInPath(circle_yellow, event.offsetX, event.offsetY);

      if (circle_yellow_click) {
        console.log("it works");
      }
    }
  });
</script>

To make the new circle clickable, you can add another event listener for the canvas element that checks if the click is inside the new circle’s path:

canvas.addEventListener("click", (event) => {
const circle_2_click = ctx.isPointInPath(circle2, event.offsetX, 
event.offsetY);

if (circle_2_click) {
const circle_yellow = circle_factory(640, 75, 0, 2, "yellow");

canvas.addEventListener("click", (event) => {
  const circle_yellow_click = ctx.isPointInPath(circle_yellow, 
event.offsetX, event.offsetY);

  if (circle_yellow_click) {
    console.log("it works");
  }
});
}});