w3.unpo<code>todo

Método isPointInPath

El método isPointInPath(x,y) detecta si un punto cuyas coordenadas son x e y se encuentra dentro de un trazado dado.

Vea la chuleta con las propiedades y metodos() de canvas.

Un ejemplo fácil

A continuación dibujamos un trazado en el <canvas>, y utilizamos el método  isPointInPath() en una sentencia condicional if.
Si ( if ) el punto se encuentra en el trazado, dibujamos un pequeño circulo con el centro en el punto.

if (ctx.isPointInPath(px, py)) {
   ctx.beginPath();
   ctx.arc(px, py, 4, 0, 2 * Math.PI);
}

De lo contrario ( else ) dibujamos un pequeño rectángulo.

Su navegador no soporta canvas :( 

var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
  var ctx = canvas.getContext("2d");
  if (ctx) {
    // dibujamos un trazado
    ctx.beginPath();
    ctx.moveTo(20, 200);
    ctx.lineTo(125, 20);
    ctx.lineTo(230, 200);
    ctx.closePath();
    ctx.stroke();

    ctx.fillStyle = "#6ab150";

    // queremos saber si el punto p está en el trazado.
    // sus coordenadas son:
    var px = 100, py = 90;

    if (ctx.isPointInPath(px, py)) {
      ctx.beginPath();
      ctx.arc(px, py, 4, 0, 2 * Math.PI);
    } else {
      ctx.beginPath();
      ctx.rect(px - 3, py - 3, 6, 6);
    }
    ctx.fill();
  }
}

Sí, el punto cuyas coordenadas son px = 100, py = 90 se encuentra dentro del trazado.

Otro ejemplo

Para obtener la posición del ratón encima del <canvas> hemos escrito la función oMousePos() que devuelve un objeto con las coordenadas x e y del ratón.
Esta función utiliza el método getBoundingClientRect().

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
	return { //objeto
	x: Math.round(evt.clientX - ClientRect.left),
	y: Math.round(evt.clientY - ClientRect.top)
}

También hemos escrito la función marcarPos() que da formato al <div id="output"> donde apuntamos el valor de las coordenadas del ratón.

Utilizamos el método addEventListener() para detectar el movimiento del ratón ("mousemove") encima del <canvas>. La función marcarPos() detecta la posición del ratón encima del trazado, utilizando isPointInPath, y marca las coordenadas de este.

function marcarPos(output, x, y) {
  if (ctx.isPointInPath(x, y)) {
    output.innerHTML = ("x: " + x + ", y: " + y);
    output.style.top = (y + 10) + "px";
    output.style.left = (x + 10) + "px";
    output.style.backgroundColor = "#FFF";
    output.style.border = "1px solid #d9d9d9"
    canvas.style.cursor = "pointer";
  } else {
    output.innerHTML = "";
    output.style.top = 0 + "px";
    output.style.left = 0 + "px";
    output.style.backgroundColor = "transparent"
    output.style.border = "none";
    canvas.style.cursor = "default";
  }
}

Su navegador no soporta canvas :( 

var canvas = document.getElementById("lienzo1");
if (canvas && canvas.getContext) {
  var ctx = canvas.getContext("2d");
  if (ctx) {
    // dibujamos un trazado
    ctx.fillStyle = "#6ab150";
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(20, 200);
    ctx.lineTo(125, 20);
    ctx.lineTo(230, 200);
    ctx.closePath();
    ctx.fill();

    canvas.addEventListener("mousemove", function(evt) {
      var mousePos = oMousePos(canvas, evt);
      var output = document.getElementById("output");
      marcarPos(output, mousePos.x, mousePos.y)
    }, false);
  }
}

function marcarPos(output, x, y) {
  if (ctx.isPointInPath(x, y)) {
    output.innerHTML = ("x: " + x + ", y: " + y);
    output.style.top = (y + 10) + "px";
    output.style.left = (x + 10) + "px";
    output.style.backgroundColor = "#FFF";
    output.style.border = "1px solid #d9d9d9"
    canvas.style.cursor = "pointer";
  } else {
    output.innerHTML = "";
    output.style.top = 0 + "px";
    output.style.left = 0 + "px";
    output.style.backgroundColor = "transparent"
    output.style.border = "none";
    canvas.style.cursor = "default";
  }
}

function oMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return { //object
    x: Math.round(evt.clientX - rect.left),
    y: Math.round(evt.clientY - rect.top)
  };
}