HW19 ellips

homework19/canvas.html

@@ -18,6 +18,7 @@
             <option value='circle'>Circle</option>
             <option value='line'>Line</option>
             <option value="rectangle">Rectangle</option>
+            <option value="ellipse">Ellipse</option>
             <option value='select'>Select</option>
         </select>
         <input type='number' id='size' value=10>

homework19/script.js

@@ -34,7 +34,6 @@ const tools = {
         },
         mousemove(e){
             if (!current) return;
-///!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1
             current.width = e.clientX - current.x
             current.height = e.clientY - current.y
             Drawable.drawAll()
@@ -44,6 +43,23 @@ const tools = {
             current = null
         }
     },
+    ellipse: {
+        mousedown(e){
+            current = new Ellipse(e.clientX, e.clientY, 1, 1, color.value)
+        },
+        mousemove(e){
+            if (!current) return;
+            var w = e.clientX - current.x;
+            var h = e.clientY - current.y;
+            current.width = w ? w : w * -1;
+            current.height = h ? h : h * -1;
+            Drawable.drawAll()
+        },
+
+        mouseup(e){
+            current = null
+        }
+    },
     line: {
         mousedown(e){
             current = new Line(e.clientX, e.clientY, 0, 0, color.value, +size.value)
@@ -143,7 +159,6 @@ Drawable.forAll = function(callback){
 class Circle extends Drawable {
     
     constructor(x,y,radius, color){
-        debugger
         super()
         this.x      = x;
         this.y      = y;
@@ -229,7 +244,6 @@ document.getElementById('delete').onclick = () =>{
 
 class Rectangle extends Drawable {
     constructor(x,y, width, height, color){
-        debugger
         super()
         this.x      = x;
         this.y      = y;
@@ -244,6 +258,7 @@ class Rectangle extends Drawable {
     
 
     draw(){
+
         ctx.beginPath();
         ctx.moveTo(this.x, this.y);
         ctx.rect(this.x, this.y, this.width, this.height);
@@ -251,5 +266,34 @@ class Rectangle extends Drawable {
         ctx.fillStyle = this.color;
         ctx.fill();
         
+    }
+}
+
+
+class Ellipse extends Drawable {
+    constructor(x,y, width, height, color){
+        super()
+        this.x      = x ? x : x*-1;
+        this.y      = y ? y : y*-1;
+        this.width  = width;
+        this.height = height;
+        this.color  = color;
+
+
+
+        this.draw(); 
+    }
+    
+
+    draw(){
+        this.width = this.width > 0 ? this.width : this.width * (-1);
+        this.height = this.height > 0 ? this.height : this.height * (-1);
+        ctx.beginPath();
+        ctx.moveTo(this.x, this.y);
+        ctx.ellipse(this.x, this.y, this.height, this.width,  Math.PI / 2, 0, 2 * Math.PI);
+        ctx.closePath();
+        ctx.fillStyle = this.color;
+        ctx.fill();
+        
     }
 }