Added basic stroke/fill/clear

desktop/sources/scripts/commander.js

@@ -15,8 +15,9 @@ function Commander (ronin) {
 
   this.start = function () {
     this._input.value = `
-(clear)
+(stroke (rect 15 15 120 80) 2 "red")
-(stroke (rect 15 15 120 80))
+(fill (rect 30 30 120 80) 2 "blue")
+(clear (rect 45 45 45 45))
 `.trim()
 
     this._status.textContent = 'Idle, RUN(cmd+enter).'
@@ -26,8 +27,10 @@ function Commander (ronin) {
   }
 
   this.run = function (txt = this._input.value) {
+    console.log('========')
     const inter = new Lisp(txt, ronin.library)
-    console.log(inter.toPixels())
+    console.log(inter)
+    inter.toPixels()
   }
 
   this.update = function () {

desktop/sources/scripts/library.js

@@ -2,9 +2,22 @@ function Library (ronin) {
   this.clear = (rect = this.select_all()) => {
   }
 
-  this.select = (x, y, w, h) => {
+  this.rect = (x, y, w, h) => {
-    const rect = { x, y, w, h }
+    return { x, y, w, h }
-    ronin.surface.addGuide(rect)
+  }
+
+  this.stroke = (rect, thickness, color) => {
+    ronin.surface.stroke(rect, thickness, color)
+    return rect
+  }
+
+  this.fill = (rect, thickness, color) => {
+    ronin.surface.fill(rect, thickness, color)
+    return rect
+  }
+
+  this.clear = (rect) => {
+    ronin.surface.clear(rect)
     return rect
   }
 

desktop/sources/scripts/lisp.js

@@ -94,7 +94,6 @@ function Lisp (input, lib) {
   }
 
   this.toPixels = function () {
-    console.log(input)
     return interpret(this.parse(input))
   }
 }

desktop/sources/scripts/surface.js

@@ -18,33 +18,40 @@ function Surface (ronin) {
 
   this.update = function () {
     for (const id in this.guides) {
-      this.drawRect(this.guides[id])
+      // this.drawRect(this.guides[id])
     }
   }
 
-  this.drawRect = function (u) {
+  this.stroke = (rect, width, color) => {
-    console.log(u)
-    u.x = !u.x ? 0 : u.x
-    u.y = !u.y ? 0 : u.y
-
-    var offset = { x: u.x * 2, y: u.y * 2 }
-    var rect = { w: u.w * 2, h: u.h * 2 }
-
-    // Outline
-
     this.context.beginPath()
-    this.context.moveTo(offset.x, offset.y)
+    this.context.moveTo(rect.x, rect.y)
-    this.context.lineTo(offset.x + rect.w, offset.y)
+    this.context.lineTo(rect.x + rect.w, rect.y)
-    this.context.lineTo(offset.x + rect.w, offset.y + rect.h)
+    this.context.lineTo(rect.x + rect.w, rect.y + rect.h)
-    this.context.lineTo(offset.x, offset.y + rect.h)
+    this.context.lineTo(rect.x, rect.y + rect.h)
-    this.context.lineTo(offset.x, offset.y)
+    this.context.lineTo(rect.x, rect.y)
-    this.context.lineCap = 'round'
+    this.context.lineWidth = width
-    this.context.lineWidth = 2
+    this.context.strokeStyle = color
-    this.context.strokeStyle = '#f00'
     this.context.stroke()
     this.context.closePath()
   }
 
+  this.fill = (rect, width, color) => {
+    this.context.beginPath()
+    this.context.moveTo(rect.x, rect.y)
+    this.context.lineTo(rect.x + rect.w, rect.y)
+    this.context.lineTo(rect.x + rect.w, rect.y + rect.h)
+    this.context.lineTo(rect.x, rect.y + rect.h)
+    this.context.lineTo(rect.x, rect.y)
+    this.context.lineWidth = width
+    this.context.fillStyle = color
+    this.context.fill()
+    this.context.closePath()
+  }
+
+  this.clear = function (rect) {
+    this.context.clearRect(rect.x, rect.y, rect.w, rect.h)
+  }
+
   this.addGuide = function (rect) {
     this.guides.push(rect)
     this.update()