2 files changed, 71 insertions, 0 deletions
diff --git a/web/learn_canvas/basics/index.html b/web/learn_canvas/basics/index.html
new file mode 100644
index 0000000..3c0cfb8
--- /dev/null
+++ b/web/learn_canvas/basics/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+</body>
+<script src="main.js"></script>
+</html>
+\ No newline at end of file
diff --git a/web/learn_canvas/basics/main.js b/web/learn_canvas/basics/main.js
new file mode 100644
index 0000000..5aa6458
--- /dev/null
+++ b/web/learn_canvas/basics/main.js
@@ -0,0 +1,60 @@
+let canvas = document.getElementById("canvas");
+let ctx = canvas.getContext("2d");
+
+var win_height = window.innerHeight;
+var win_width = window.innerWidth;
+
+canvas.height = win_height;
+canvas.width = win_width;
+console.log(canvas.width, canvas.height);
+
+canvas.style.background = "#bbf";
+
+
+class Circle {
+    constructor(context, xpos, ypos, radius, color) {
+        this.context = context;
+        this.xpos = xpos;
+        this.ypos = ypos;
+        this.radius = radius;
+        this.color = color;
+    }
+    draw() {
+        this.context.beginPath();
+        this.context.arc(this.xpos, this.ypos, this.radius, 0, Math.PI*2, this.color);
+        this.context.strokeStyle = "grey";
+        this.context.lineWidth = 15;
+        this.context.fillStyle = this.color;
+        this.context.fill();
+        this.context.stroke();
+        this.context.closePath();
+    }
+    clickCircle(xmouse, ymouse) {
+        const distance = Math.sqrt((xmouse - this.xpos) * (xmouse - this.xpos) + (ymouse - this.ypos) * (ymouse - this.ypos));
+        if (distance <= this.radius) {
+            return true;
+        }
+        return false;
+    }
+    changeColor (newColor) {
+        this.color = newColor;
+        this.draw();
+    }
+}
+
+
+let circle = new Circle(ctx, 200, 200, 100, "blue");
+circle.draw(ctx);
+canvas.addEventListener("click", (event) => {
+//    console.log(event);
+//    console.log("clicked canvas");
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    if (circle.clickCircle(x, y)) {
+        circle.changeColor("red");
+    } else {
+        circle.changeColor("blue");
+    }
+//    console.log(rect);
+});