59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
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 = [];
|
|
});
|
|
};
|