Menu
I'm studying jquery and html5 canvas. All I want to do is a simple html5 drawing example. When the mouse move, I draw red squares under my mouse.
My code is simple, but I have a problem getting the mouse cursor position within the canvas.
Right now, I am using x=event.offsetX; to get the mouse position. This works very well in chrome, however when it comes to firefox, it doesn't work. I changed the code to x=event.layerX. but it seems that layerX is the position of my mouse relative to the web page, not the position of the canvas. because I always see an offset.
I have two questions, first, what is the right thing to do to get the correct mouse position under firefox. second, how can i write a code that works for ie, firefox, chrome, safari and opera?
here is my code:
<!doctype html />
<html><head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
var flip = document.getElementById('flip');
var context = flip.getContext('2d');
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0, 0, 500, 500);
$("a").click(function(event){alert("Thanks for visiting!");});
$("#flip").mousemove(function(event){
var x, y;
x = event.layerX;
y = event.layerY;
//alert("mouse pos"+event.layerX );
var flip = document.getElementById('flip');
var context = flip.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(x, y, 5, 5);
}
);
}
);
</script>
</head> <body bgcolor="#000000"> <a href="http://jquery.com/">jQuery</a><canvas id="flip" width="500" height="500">
This text is displayed if your browser does not support HTML5 Canvas.</canvas> </body></html>
785
Rumors circulated earlier this semester among students about a new function on Canvas that professors can use to monitor students' mouse movements and the new tabs they opened. But these rumors are false, said Mario Guerra, UT Canvas service manager.
Before we start, you need to know that it's not actually possible to move the mouse pointer to a position using Javascript, such functionality can we easily misused but we can simulate something similar.
<canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, combine photos, or create simple animations.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script>
Element.prototype.leftTopScreen = function () {
var x = this.offsetLeft;
var y = this.offsetTop;
var element = this.offsetParent;
while (element !== null) {
x = parseInt (x) + parseInt (element.offsetLeft);
y = parseInt (y) + parseInt (element.offsetTop);
element = element.offsetParent;
}
return new Array (x, y);
}
document.addEventListener ("DOMContentLoaded", function () {
var flip = document.getElementById ("flip");
var xy = flip.leftTopScreen ();
var context = flip.getContext ("2d");
context.fillStyle = "rgb(255,255,255)";
context.fillRect (0, 0, 500, 500);
flip.addEventListener ("mousemove", function (event) {
var x = event.clientX;
var y = event.clientY;
context.fillStyle = "rgb(255, 0, 0)";
context.fillRect (x - xy[0], y - xy[1], 5, 5);
});
});
</script>
<style>
#flip {
border: 1px solid black;
display: inline-block;
}
body {
text-align: center;
}
</style>
</head>
<body>
<canvas id = "flip" width = "500" height = "500">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
</body>
</html>
You don't have to worry about compatibility, only IE (prior 9) does not support canvas natively.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
