This recipe must be tried out on a touch device. The recipe is very simple, and is just to introduce one more type of event, touch. The output looks like this:
The HTML code:
<html>
<head>
<title>touch event</title>
<script>
var can;
var ctx;
var color;
function init()
{
can=document.getElementById("MyCanvasArea");
ctx=can.getContext("2d");
can.addEventListener("touchstart",doTouchStart,false);
color="blue";
drawRectangle();
}
function drawRectangle()
{
ctx.beginPath();
ctx.rect(0,0,can.width,can.height);
ctx.fillStyle= color;
ctx.fill();
ctx.closePath();
}
function doTouchStart(event)
{
event.preventDefault();
if(color=="blue")
color="green";
else
color="blue";
ctx.clearRect(0,0,can.width,can.height);
drawRectangle();
}
</script>
<body onload=init()>
<canvas width="400" height...