Added circle mode

README.md

@@ -11,9 +11,10 @@ We could not find a decent webpage to draw quick line doodles, so here's one.
 - `1` trace mode.
 - `2` tone mode.
 - `3` block mode.
-- `4` hor mode.
-- `5` ver mode.
-- `6` dot mode.
+- `4` circle mode.
+- `5` hor mode.
+- `6` ver mode.
+- `7` dot mode.
 - `0` drag mode.
 
 ### Controls

index.html

@@ -3,9 +3,11 @@
 1 trace
 2 tone
 3 block
-4 hor
-5 ver
-6 dot
+4 circle
+5 hor
+6 ver
+7 dot
+8 deco
 0 drag
 
 click black

noodle.js

@@ -138,6 +138,22 @@ function Noodle () {
     }
   }
 
+  this.circle = (a, b) => {
+    let r = Math.floor(cursor.size / 2)
+    let x = -r
+    let y = 0
+    let err = 2 - 2 * r
+    do {
+      this.pixel(b.x - x, b.y + y)
+      this.pixel(b.x - y, b.y - x)
+      this.pixel(b.x + x, b.y - y)
+      this.pixel(b.x + y, b.y + x)
+      r = err
+      if (r <= y) err += ++y * 2 + 1
+      if (r > x || err > y) err += ++x * 2 + 1
+    } while (x < 0)
+  }
+
   this.pixel = (x, y) => {
     this.context.fillRect(Math.floor(x), Math.floor(y), 1, 1)
   }
@@ -242,12 +258,14 @@ function Noodle () {
     } else if (e.key === '3') {
       this.set('block')
     } else if (e.key === '4') {
-      this.set('hor')
+      this.set('circle')
     } else if (e.key === '5') {
-      this.set('ver')
+      this.set('hor')
     } else if (e.key === '6') {
-      this.set('dot')
+      this.set('ver')
     } else if (e.key === '7') {
+      this.set('dot')
+    } else if (e.key === '8') {
       this.set('deco')
     } else if (e.key === '0') {
       this.set('drag')