Como cerrar trazados en el canvas

A partir de dos líneas podemos consturir una figura cerrada con tan solo unir sus extremos con una recta, esto se puede hacer con el método closePath(): traza una linea recta desde el punto donde comienza el dibujo hasta el punto donde termina, formando así un trazado o camino cerrado. En este ejemplo lo usamos para cerrar un arco de 180º. Se dibuja sin cerrar y cerrándolo, para que veas la diferencia.

<canvas width="600" height="400" id="mipanel" style="border: 1px solid black"></canvas>

<script> 

    let panel = document.getElementById('mipanel');

    let lapiz = panel.getContext("2d");

    lapiz.beginPath(); 

    lapiz.arc(60, 60, 40, 0, Math.PI,true); 

    lapiz.stroke();

    lapiz.beginPath(); 

    lapiz.arc(160, 60, 40, 0, Math.PI,true); 

    lapiz.closePath();

    lapiz.stroke();

</script>

Prueba este código

Cerrar lados permite dibujar polígonos cerrados

Situaciones relativas de objetos

Existen dos métodos para determinar donde se encuentra un punto en relación a una figura o trazado que se haya creado inmediatamente antes en el canvas. No es necesario dibujarla, solo crearla.

isPointInStroke(x, y): Permite saber si el punto dado por las coordenadas X, Y forma parte de un trazado
isPointInPath(x, y): En este caso el método me dice si el punto está en el área encerrado por la linea, que se entiende está formando una figura cerrada (rectángulos, circunferencia, polígono)

<canvas width="600" height="400" id="mipanel" style="border: 1px solid black"></canvas>

<div id="texto"></div>

<script>	

   let miLienzo = document.getElementById("mipanel");

   let lapiz = miLienzo.getContext("2d");

   let aviso = document.getElementById("texto");

   lapiz.moveTo(50, 50);

   lapiz.rect(50, 50, 200, 200);

   lapiz.stroke();  //solo para que veas el contorno, no es necesario.

 //Cambia x, y para ver que el programa detecta donde está el punto rojo

   let x=60, y= 60;

   if (lapiz.isPointInPath( x, y)){

     if (lapiz.isPointInStroke( x, y))

	    aviso.innerHTML = "Punto ("+x+", "+y+") en el límite del rectángulo";

    else

      aviso.innerHTML = "Punto ("+x+", "+y+") dentro del rectángulo";

     }else

          aviso.innerHTML = "Punto ("+x+", "+y+") fuera del rectángulo";

    //Se dibuja el punto en rojo.

    lapiz.fillStyle= "red";

    lapiz.fillRect(x-2,y-2,4,4);

</script>

Prueba este código

Puede ser útil para juegos ¿verdad?. El código no es complicado aunque tiene un poco de programación, son sentencias condicionales para comprobar donde está un punto determinado, en función del resultado de la comprobación el programa realziará una acción u otra (ejecutará un código u otro).

La pertenencia a un trazado o a una figura cerrada es básico para juegos: por ejemplo permite saber si dos objetos chocan.