var Point = /** @class */ (function () {
    function Point(x, y, style) {
        this.x = x;
        this.y = y;
        this.style = style;
    }
    return Point;
}());
var Stroke = /** @class */ (function () {
    function Stroke(vertices) {
        this.vertices = vertices;
    }
    Stroke.prototype.draw = function (ctx) {
        var path = new Path2D();
        path.moveTo(this.vertices[0].x, this.vertices[0].y);
        for (var i = 1; i < this.vertices.length; i++) {
            ctx.strokeStyle = this.vertices[i].style;
            path.lineTo(this.vertices[i].x, this.vertices[i].y);
            ctx.stroke(path);
        }
    };
    return Stroke;
}());
var CanvasState = /** @class */ (function () {
    function CanvasState() {
    }
    return CanvasState;
}());
window.onload = function () {
    var canvas = document.getElementById("draw-area");
    if (!canvas.getContext) {
        alert("HTML Canvas not supported! Application will not run");
        throw new Error("HTML Canvas not supported!");
    }
    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, "rgb(".concat(Math.round(Math.random() * 255), ",").concat(Math.round(Math.random() * 255), ",").concat(Math.round(Math.random() * 255), ")"));
            if (lastPoint != null) {
                new Stroke([lastPoint, point]).draw(ctx);
            }
            lastPoint = point;
            points.push(point);
        }
    });
    canvas.addEventListener('mousedown', function (ev) {
        addPointsToArray = true;
    });
    canvas.addEventListener('mouseup', function (ev) {
        addPointsToArray = false;
        lastPoint = null;
        points = [];
    });
};