Making a face smile
This recipe is another example of handling a mouse event. As soon as you place the cursor on the face, it smiles; otherwise, it shows a sad expression. This is a simple recipe, the output of which looks like this:
How to do it
The recipe is as follows:
The HTML code:
<html>
<head>
<title>Event Handling example</title>
<script src="Smiley.js"></script>
</head>
<body onload=init()>
<h1>I love to smile. Please place the cursor on me</h1>
<canvas width="400" height="400" id="MyCanvasArea" style="border:2px solid blue;">
Canvas tag is not supported by your browser
</canvas>
</body>
</html>The JavaScript code:
var can;
var ctx;
function init(){
can=document.getElementById("MyCanvasArea");
can.addEventListener('mousemove',function(event){
if(event.region)
{
clear();
drawSmiley(...
