var Point = /** @class */ (function () {
    function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    return Point;
}());
function createStroke(ctx, points) {
    ctx.moveTo(points[0].x, points[0].y);
    for (var i = 1; i < points.length; i++) {
        ctx.lineTo(points[i].x, points[i].y);
    }
    ctx.stroke();
}
window.onload = function () {
    var canvas = document.getElementById("draw-area");
    var ctx = canvas.getContext("2d");
    var lastPoint = null;
    var points = [];
    var box = canvas.getBoundingClientRect();
    var addPointsToArray = false;
    canvas.addEventListener('mousemove', function (ev) {
        if (addPointsToArray) {
            var point = new Point(ev.clientX - box.x, ev.clientY - box.y);
            if (lastPoint != null) {
                createStroke(ctx, [lastPoint, point]);
            }
            lastPoint = point;
            points.push(point);
        }
    });
    canvas.addEventListener('mousedown', function (ev) {
        addPointsToArray = true;
    });
    canvas.addEventListener('mouseup', function (ev) {
        addPointsToArray = false;
        lastPoint = null;
        console.log(points);
        points = [];
    });
};