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> 
    var panel = document.getElementById('mipanel');
    var 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

 

Pertenencia a tramos y areas

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>	var miLienzo = document.getElementById("mipanel");
	var lapiz = miLienzo.getContext("2d");
	var aviso = document.getElementById("texto");
	lapiz.moveTo(50, 50);
	lapiz.rect(50, 50, 200, 200);
	lapiz.stroke();  //solo lo pongo para que veas, no es necesario
	var 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";
//Dibujo 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: parte de un programa se ejecuta si una condición es cierta.