ellipse fraw and sellect done

hw16-canvas-and-oop/eval_files/index.js

@@ -64,7 +64,7 @@ const tools = {
     },
     ellipse: {
         mousedown(e){
-            current = new Ellipse(e.clientX, e.clientY, 0, 0, color.value, +size.value)
+            current = new Ellipse(e.clientX, e.clientY, 0, 0, color.value)
         },
         mousemove(e){
             if (!current) return;
@@ -251,6 +251,7 @@ class Rectangle extends Drawable {
         ctx.strokeStyle = this.color;
         ctx.fillStyle = this.color;
         ctx.fillRect(this.x, this.y, this.width, this.height)
+        ctx.stroke()
         if (selected){
             ctx.beginPath();
             ctx.rect(this.x, this.y, this.width, this.height)
@@ -283,40 +284,57 @@ class Ellipse extends Drawable {
 
         this.draw(); 
     }
-    
 
-    draw(){
-        ctx.beginPath();
-        ctx.moveTo(this.x, this.y);
-        ctx.lineTo(this.x + this.width, this.y + this.height);
-        ctx.closePath();
-        ctx.strokeStyle = this.color;
-        ctx.fillStyle = this.color;
-        ctx.ellipse(this.x, this.y, this.height, this.width, Math.PI / 2, 0, 2 * Math.PI);
-        // if (selected){
-        //     ctx.beginPath();
-        //     ctx.rect(this.x, this.y, this.width, this.height)
-        //     ctx.lineWidth = 2
-        //     ctx.strokeStyle = 'black'
-        //     ctx.closePath();
-
-        //     ctx.stroke()
-        // }
-        ctx.fill()
+    get rx() {
+        return this.width / 2
     }
-}
 
+    get ry() {
+        return this.height / 2
+    }
 
+    get h() {
+        return this.x + this.rx
+    }
 
+    get k() {
+        return this.y + this.ry
+    }
 
-//new Line(0,0,100,100, "red")
-////new Circle(30,30,10, "red")
+    draw(selected){
+        ctx.beginPath();
+        ctx.fillStyle = this.color;
+        ctx.ellipse(
+            this.h,
+            this.k,
+            this.rx > 0? this.rx : -(this.rx),
+            this.ry > 0? this.ry : -(this.ry),
+            0,
+            0,
+            Math.PI * 2
+        )
+        if (selected){
+            ctx.beginPath();
+            ctx.ellipse(
+                this.h,
+                this.k,
+                this.rx > 0? this.rx : -(this.rx),
+                this.ry > 0? this.ry : -(this.ry),
+                0,
+                0,
+                Math.PI * 2
+            )
+            
+            ctx.lineWidth = 2
+            ctx.strokeStyle = 'black'
+            ctx.closePath();
+            ctx.stroke()
+        }
+        ctx.fill()
+    }
 
-////canvas.onmousemove = function(e){
-////}
+    in(x,y){
+        return (((x - this.h)**2) / ((this.rx)**2)) + (((y - this.k)**2) / ((this.ry)**2)) <= 1
+    }
+}
 
-//undo.onclick = function(){
-    //Drawable.instances.pop()
-    ////Drawable.instances = []
-    //Drawable.drawAll()
-//}