event.offsetX en Firefox
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript">
function main(){
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousemove", function(e){
if (!e) e = window.event;
var ctx = canvas.getContext("2d");
var x = e.offsetX;
var y = e.offsetY;
ctx.fillRect(x, y, 1, 1);
});
}
</script>
</head>
<body onload="main();">
<div style="width: 800px; height: 600px; -webkit-transform: scale(0.75,0.75); -moz-transform: scale(0.75,0.75)">
<canvas id="canvas" width="400px" height="400px" style="background-color: #cccccc;"></canvas>
</div>
</body>
</html>
Por favor, tenga en cuenta el ejemplo rápido y sucio anterior. Tenga en cuenta que mi lienzo está contenido por un div que tiene aplicada una transformación de escala. El código anterior funciona perfectamente en cualquier navegador webkit. Mientras mueve el ratón dibuja puntos en el lienzo. Desafortunadamente, no lo hace en Firefox, ya que su modelo de evento no admite las propiedades offsetX / Y. ¿Cómo puedo transformar las coordenadas del mouse de (quizás) event.clientX (que también es compatible con Firefox) en coordenadas relativas del lienzo teniendo en cuenta la posición del lienzo, la transformación, etc.? Gracias, Luca.