sending end code

<html>

<head>
<title>Testing HTML5's Canvas</title>
<script type="text/javascript">
var mouseDown = 0;
window.onmousedown = function() {
    mouseDown = 1;
}
function depressButton(btn) {
    btn.style.borderStyle = "inset";
}
function unpressButton(btn) {
    btn.style.borderStyle = "outset";
}
window.onmouseup = function() {
    mouseDown = 0;
}
var xmlhttp;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else
{ // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
</script>
<style type="text/css">
.toolbutton {
    background-color: silver;
    display: inline-block;
    border-style: outset;
    height: 15;
    font-size: 9pt;
    text-align: center;
    margin: 2px;
    width: 50;
    cursor: pointer;
}
</style>
</head>

<body>

<span class="toolbutton" onmousedown="depressButton(this);" onmouseup="unpressButton(this)" onmouseout="unpressButton(this)" onclick="selectTool('pencil')">PENCIL</span>
<span class="toolbutton" onmousedown="depressButton(this);" onmouseup="unpressButton(this)" onmouseout="unpressButton(this)" onclick="selectTool('eraser')">ERASER</span>
<span class="toolbutton" onmousedown="depressButton(this);" onmouseup="unpressButton(this)" onmouseout="unpressButton(this)" onclick="selectTool('line')">LINE</span><br />
<canvas id="myCanvas" width="800" height="400" style="border: 2px black solid; cursor: crosshair;">
Yoru browser does not support Canvas. :C
</canvas><br />

<label>X: </label><label id="x">0</label><br />
<label>Y: </label><label id="y">0</label><br />
<label>mouseDown: </label><label id="md"></label>
<div id="dump"></div>

<script type="text/javascript">

var context = document.getElementById("myCanvas").getContext("2d");
context.fillStyle = "red";
context.strokeStyle = "red";

context.beginPath();
context.moveTo(0, 0);

function serialize(c) {
    return c.toDataURL();
}

function deserialize(data, c) {
    var img = new Image();
    img.onload = function() {
        c.width = img.width;
        c.height = img.height;
        c.getContext("2d").drawImage(img, 0, 0);
    };

    img.src = data;
}
function postToServer(data) {
    data = "data=" + data;
    xmlhttp.open("POST", "canvas.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", data.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(data);
}
function mouseMoveHandler(e) {
    var x = e.pageX - 8;
    var y = e.pageY - 35;
    document.getElementById("x").innerHTML = x;
    document.getElementById("y").innerHTML = y;
    document.getElementById("md").innerHTML = mouseDown;
    //
    if (mouseDown) {
        context.lineTo(x, y);
        context.stroke();
        context.beginPath();
    }
    context.moveTo(x, y);
    var imagedata = serialize(document.getElementById("myCanvas"));
    postToServer(imagedata);
    document.getElementById("dump").innerHTML = imagedata;
}

document.onmousemove = mouseMoveHandler;
</script>
</body>

</html>