La posición del ratón

facebook-svg gplus-svg twitter-svg

Para obtener la posición del ratón encima del <canvas> hemos creado 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 otras dos funciones:
marcarCoords() que da formato al <div id="output"> donde aparece el valor de las coordenadas y

function marcarCoords(output, 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";
}

y limpiarCoords() que borra el contenido del <div id="output">.

function limpiarCoords(output) {
  output.innerHTML = "";
  output.style.top = 0 + "px";
  output.style.left = 0 + "px";
  output.style.backgroundColor = "transparent"
  output.style.border = "none";
  canvas.style.cursor = "default";
}

Utilizamos el método addEventListener() para detectar el movimiento del ratón ("mousemove") encima del canvas, y marcar las coordenadas con marcarCoords().
También utilizamos el método addEventListener() para registrar la salida del ratón ("mouseout") fuera del canvas, y borrar el valor del <div id="output"> con limpiarCoords().


Su navegador no soporta canvas :(

		var canvas = document.getElementById("lienzo");
		if (canvas && canvas.getContext) {
		  var ctx = canvas.getContext("2d");
		  if (ctx) {
		    var output = document.getElementById("output");

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

		    canvas.addEventListener("mouseout", function(evt) {
		      limpiarCoords(output);
		    }, false);
		  }
		}

		function marcarCoords(output, 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";
		}

		function limpiarCoords(output) {
		  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 ClientRect = canvas.getBoundingClientRect();
		  return { //objeto
		    x: Math.round(evt.clientX - ClientRect.left),
		    y: Math.round(evt.clientY - ClientRect.top)
		  }
		}
Su navegador no soporta canvas :(

Pase por encima del canvas para obtener la posición actual del ratón.