var Canvas = {
    rec: false,
    end: [0, 0],
    length: 0
}
    Canvas.init = function() {
        this.canvas = $('cnvs');
        this.canvas.width = '400';
        this.canvas.height = '300';
        this.ctx = this.canvas.getContext('2d');
    }
    Canvas.drawPoint = function(x, y) {
        var ctx = this.ctx;
        ctx.beginPath();
        ctx.arc(x, y, 3, 0, Math.PI * 2, true);
        ctx.stroke();
        ctx.closePath();
    }
    Canvas.drawLine = function(s/*Array*/, e/*Array*/) {
        var ctx = this.ctx;
        ctx.beginPath();
        ctx.moveTo(s[0], s[1]);
        ctx.lineTo(e[0], e[1]);
        ctx.stroke();
        ctx.closePath();
    }
    Canvas.calcLength = function(s/*Array*/, e/*Array*/) {
        $('len').value = parseFloat($('len').value)
            + Math.sqrt((s[0] - e[0]) * (s[0] - e[0])
                + (s[1] - e[1]) * (s[1] - e[1]));
    }
    Canvas.clear = function() {
        this.ctx.clearRect(0, 0, 400, 300);
    }

function init_event() {
    $('cnvs').addEventListener('click', function(e) {
        var x = e.clientX - this.offsetLeft;
        var y = e.clientY - this.offsetTop;
        if(Canvas.rec == false) {
            Canvas.rec = true;
        } else {
            Canvas.drawLine(Canvas.end, [x, y]);
            Canvas.calcLength(Canvas.end, [x, y]);
        }
        Canvas.drawPoint(x, y);
        Canvas.end = [x, y]
    }, false);
    $('clear').addEventListener('click', function() {
        Canvas.rec = false;
        Canvas.end = [0, 0];
        Canvas.clear();
        $('len').value = 0;
    }, false);
}

function $(id) {
    return $[id] || ($[id] = document.getElementById(id));
}

window.addEventListener('load', function() {
    Canvas.init();
    init_event();
}, false);