From c5991790af5404870b36d1e14408cb1e2d037f7b Mon Sep 17 00:00:00 2001
From: Lilly Rosaline <lilly.rosaline@waterlilly.dev>
Date: Wed, 13 Jul 2022 04:13:59 -0500
Subject: [PATCH] Added color

---
 app.js | 37 +++++++++++++++++++++++++++----------
 app.ts | 35 ++++++++++++++++++++---------------
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/app.js b/app.js
index f37a236..ab23b8c 100644
--- a/app.js
+++ b/app.js
@@ -1,19 +1,37 @@
 var Point = /** @class */ (function () {
-    function Point(x, y) {
+    function Point(x, y, style) {
         this.x = x;
         this.y = y;
+        this.style = style;
     }
     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);
+var Stroke = /** @class */ (function () {
+    function Stroke(vertices) {
+        this.vertices = vertices;
     }
-    ctx.stroke();
-}
+    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 = [];
@@ -21,9 +39,9 @@ window.onload = function () {
     var addPointsToArray = false;
     canvas.addEventListener('mousemove', function (ev) {
         if (addPointsToArray) {
-            var point = new Point(ev.clientX - box.x, ev.clientY - box.y);
+            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) {
-                createStroke(ctx, [lastPoint, point]);
+                new Stroke([lastPoint, point]).draw(ctx);
             }
             lastPoint = point;
             points.push(point);
@@ -35,7 +53,6 @@ window.onload = function () {
     canvas.addEventListener('mouseup', function (ev) {
         addPointsToArray = false;
         lastPoint = null;
-        console.log(points);
         points = [];
     });
 };
diff --git a/app.ts b/app.ts
index 1e80dfb..0461426 100644
--- a/app.ts
+++ b/app.ts
@@ -1,24 +1,32 @@
 class Point {
 	x: number;
 	y: number;
-	constructor(x: number, y: number) {
+	style: string;
+	constructor(x: number, y: number, style: string) {
 		this.x = x;
 		this.y = y;
+		this.style = style;
 	}
 }
 class Stroke {
-	v1: Point;
-	v2: Point;
-	color: String;
-}
-function createStroke(ctx: CanvasRenderingContext2D, points: Array<Point>) {
-	ctx.moveTo(points[0].x, points[0].y);
-	for(var i = 1; i < points.length; i++) {
-		ctx.lineTo(points[i].x, points[i].y);
+	vertices: Array<Point>;
+	constructor(vertices: Array<Point>) {
+		this.vertices = vertices;
+	}
+	draw(ctx: CanvasRenderingContext2D) {
+	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);
+	}
+	
 	}
-	ctx.stroke();
 }
+class CanvasState {
 
+}
 window.onload = () => {
 	var canvas = document.getElementById("draw-area") as HTMLCanvasElement;
 	if(!canvas.getContext) {
@@ -32,9 +40,9 @@ window.onload = () => {
 	var addPointsToArray = false;
     canvas.addEventListener('mousemove', (ev: MouseEvent) => {
 		if(addPointsToArray) {
-		var point = new Point(ev.clientX - box.x, ev.clientY - box.y)
+		var point = new Point(ev.clientX - box.x, ev.clientY - box.y, `rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)})`)
 			if(lastPoint != null) {
-				createStroke(ctx, [lastPoint, point]);
+				new Stroke([lastPoint, point]).draw(ctx);
 			}
 			lastPoint = point;
 			points.push(point);
@@ -46,9 +54,6 @@ window.onload = () => {
 	canvas.addEventListener('mouseup', (ev: MouseEvent) => {
 		addPointsToArray = false;
 		lastPoint = null;
-		console.log(points);
 		points = [];
 	});
 };
-
-