<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Canvas box</title>
<style type='text/css'>
* {
margin:0;
padding:0;
}
canvas {
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-320px;
border:1px solid #000;
}
</style>
<script type='text/javascript'>
function box() {
var ctx=document.getElementById('canvas').getContext('2d')
var i
if (x<0 || x>639 || y<0 || y>399) end=[320,-100]
else {
for (i=0;i<pl;i++) {
if (p[i][0]==x) x++
if (p[i][1]==y) y++
}
end=[x,y]
}
if (end[1]>p[0][1]) l*=-1
var ep=new Array()
for (i=0;i<pl;i++) ep[i]=[p[i][0]-l/((end[1]-p[i][1])/(end[0]-p[i][0])),p[i][1]-l]
ctx.clearRect(0,0,640,400)
ctx.beginPath()
for (i=0;i<pl;i++) {
ni=i+1-Math.floor((i+1)/pl)*pl
ctx.moveTo(p[i][0],p[i][1])
ctx.lineTo(p[ni][0],p[ni][1])
ctx.moveTo(p[i][0],p[i][1])
ctx.lineTo(ep[i][0],ep[i][1])
ctx.lineTo(ep[ni][0],ep[ni][1])
}
ctx.stroke()
if (p[2][0]>637) a=-1
else if (p[0][0]<3) a=1
for (i=0;i<pl;i++) p[i][0]+=a
if (p[2][0]-p[1][0]==75) z=-1
else if (p[2][0]-p[1][0]==25) z=1
p[2][0]+=z
p[3][0]+=z
if (p[1][1]>397) b=-.5
else if (p[0][1]<3) b=.5
for (i=0;i<pl;i++) p[i][1]+=b
if (p[1][1]-p[0][1]==75) z=-1
else if (p[1][1]-p[0][1]==25) z=1
p[1][1]+=z
p[2][1]+=z
if (l==-10) c=.5
else if (l==40) c=-.5
l+=c
setTimeout("box()",10)
}
function load() {
p=new Array()
p[0]=[2,348]
p[1]=[2,398]
p[2]=[52,398]
p[3]=[52,348]
pl=p.length
l=10
c=.5
z=-1
x=-1
y=-1
box()
}
function getwh() {
if (self.innerHeight) {
h=self.innerHeight
w=self.innerWidth
}
else if (document.documentElement && document.documentElement.clientHeight) {
h=document.documentElement.clientHeight
w=document.documentElement.clientHeight
}
else if (document.body) {
h=document.body.clientHeight
w=document.body.clientWidth
}
}
function mm(e) {
getwh()
x=Math.floor(e.pageX-(w-642)/2-2)
y=Math.floor(e.pageY-(h-402)/2-2)
}
window.onload=load
document.onmousemove=mm
</script>
</head>
<body>
<canvas id='canvas' width='640' height='400'></canvas>
</body>
</html>