kissarat · March 31, 2013 00:13
diff --git a/canvas.html b/canvas.html
 <html>
 <head>
    <style type="text/css">
        canvas {
            border: 1px solid #000000;
        }
    </style>
    <script type="text/javascript">
        var canvas;
        var gra;
        var current;
        var figures = [];
        var Point = function(x, y) {
            this.x = x;
            this.y = y;
        }

        var Line = function(a1, a2) {
            if (a1 instanceof Point) {
                this.begin = a1;
                if (a2)
                    this.end = a2;
            }
            else if (isFinite(a1)) {
                this.begin = new Point(a1, a2);
            }
            this.draw = function(g) {
                if (!this.end)
                    return;
                g.strokeStyle = "#000000";
                g.beginPath();
                g.moveTo(this.begin.x, this.begin.y);
                g.lineTo(this.end.x, this.end.y);
                g.closePath();
                g.stroke();
            }
        }

        addEventListener('load', function() {
            canvas = document.getElementsByTagName('canvas').item(0);
            gra = canvas.getContext('2d');

            canvas.addEventListener('mousedown', function(e) {
                current = new Line(e.clientX, e.clientY);
                console.log(e.clientX, e.clientY);
            });
            canvas.addEventListener('mousemove', function(e) {
                if (!current)
                    return;
                current.end = new Point(e.clientX, e.clientY);
                gra.clearRect(0, 0, canvas.width, canvas.height);
                current.draw(gra);
                for(var i=0; i<figures.length; i++)
                    figures[i].draw(gra);
            });
            canvas.addEventListener('mouseup', function(e) {
                figures.push(current);
                console.log(e.clientX, e.clientY);
                current = null;
            });
        });
    </script>
 </head>
 <body>
 <canvas width="800" height="800"/>
 </body>
 </html>
	<html>
	<head>
	<style type="text/css">
	canvas {
	border: 1px solid #000000;
	}
	</style>
	<script type="text/javascript">
	var canvas;
	var gra;
	var current;
	var figures = [];
	var Point = function(x, y) {
	this.x = x;
	this.y = y;
	}

	var Line = function(a1, a2) {
	if (a1 instanceof Point) {
	this.begin = a1;
	if (a2)
	this.end = a2;
	}
	else if (isFinite(a1)) {
	this.begin = new Point(a1, a2);
	}
	this.draw = function(g) {
	if (!this.end)
	return;
	g.strokeStyle = "#000000";
	g.beginPath();
	g.moveTo(this.begin.x, this.begin.y);
	g.lineTo(this.end.x, this.end.y);
	g.closePath();
	g.stroke();
	}
	}

	addEventListener('load', function() {
	canvas = document.getElementsByTagName('canvas').item(0);
	gra = canvas.getContext('2d');

	canvas.addEventListener('mousedown', function(e) {
	current = new Line(e.clientX, e.clientY);
	console.log(e.clientX, e.clientY);
	});
	canvas.addEventListener('mousemove', function(e) {
	if (!current)
	return;
	current.end = new Point(e.clientX, e.clientY);
	gra.clearRect(0, 0, canvas.width, canvas.height);
	current.draw(gra);
	for(var i=0; i<figures.length; i++)
	figures[i].draw(gra);
	});
	canvas.addEventListener('mouseup', function(e) {
	figures.push(current);
	console.log(e.clientX, e.clientY);
	current = null;
	});
	});
	</script>
	</head>
	<body>
	<canvas width="800" height="800"/>
	</body>
	</html>