HTML5 Canvas can handle key and mouse events.
The following code adds click handler for canvas with
addEventListener method.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var stage= document.getElementById('canvas');
var context = stage.getContext('2d');
<!-- w w w. j ava2 s . co m-->
canvas.addEventListener('click', canvasClicked, false);
function canvasClicked(e) {
console.log("Clicked");
}
</script>
</body>
</html>
The code above is rendered as follows:
The following code handle mouse down event and draws a square for each click.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var stage= document.getElementById('canvas');
var context = stage.getContext('2d');
<!-- w ww. j a v a2 s .c o m-->
canvas.addEventListener("mousedown", function(e) {
var x = e.x;
var y = e.y;
context.fillRect(x, y, 3, 3);
}, true);
</script>
</body>
</html>
The code above is rendered as follows:
The following code shows how to handle mouse move event.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var stage= document.getElementById('canvas');
var context = stage.getContext('2d');
<!--from w w w. j av a 2s . com-->
canvas.addEventListener("mousemove", function(e){
if (!e) e = window.event;
var ctx = canvas.getContext("2d");
var x = e.offsetX==undefined?e.layerX:e.offsetX;
var y = e.offsetY==undefined?e.layerY:e.offsetY;
ctx.fillRect(x, y, 3, 3);
});
</script>
</body>
</html>
The code above is rendered as follows:
The following code handles mouse move out event.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var canvElem= document.getElementById('canvas');
var ctx = canvElem.getContext('2d');
<!-- w w w . ja v a 2 s. c o m-->
ctx.beginPath();
ctx.arc(75, 50, 25, 0, 2 * Math.PI);
ctx.fill();
canvElem.addEventListener('mousemove', procMove, false);
canvElem.addEventListener('mouseout', procOut, false);
function procMove(event) {
var x = event.clientX;
var y = event.clientY;
var node = event.target;
console.log("Coordinates: (" + x + "," + y + ")");
if (ctx.isPointInPath(x, y)) {
document.body.style.cursor = "pointer";
} else {
document.body.style.cursor = "default";
}
};
function procOut() {
document.body.style.cursor = "default";
};
</script>
</body>
</html>
The code above is rendered as follows:
The following code handles the mouse up event and we can draw lines with mouse.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
var canvas= document.getElementById('canvas');
var ctx = canvas.getContext('2d');
<!--from ww w.j a v a2 s . c o m-->
canvas.addEventListener('mousedown', function(e) {
this.down = true;
this.X = e.pageX ;
this.Y = e.pageY ;
}, 0);
canvas.addEventListener('mouseup', function() {
this.down = false;
}, 0);
canvas.addEventListener('mousemove', function(e) {
if(this.down) {
with(ctx) {
beginPath();
moveTo(this.X, this.Y);
lineTo(e.pageX , e.pageY );
ctx.lineWidth=1;
stroke();
}
this.X = e.pageX ;
this.Y = e.pageY ;
}
}, 0);
</script>
</body>
</html>
The code above is rendered as follows:
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#myCanvas {<!-- w w w . ja v a 2 s. c o m-->
border: 5px solid #d3d3d3;
}
</style>
<script type='text/javascript'>
window.onload=function(){
window.requestAnimFrame = function(callback) {
window.setTimeout(callback, 1000 / 60);
};
(function wheely() {
var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d"),
cnt = 0;
ctx.font = "30px Arial";
if ('onmousewheel' in c) c.addEventListener('mousewheel', wheeled, false);
else c.addEventListener('DOMMouseScroll', wheeled, false);
function wheeled(event) {
cnt++;
return false;
}(function draw() {
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillText("Hello World " + cnt, 10, 50);
window.requestAnimFrame(draw);
})();
})();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="100"></canvas>
</body>
</html>
The code above is rendered as follows: