From d496f1298142fd549f29c1c86362ca57b3fb7faa Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Mon, 14 Nov 2016 10:43:00 -0800
Subject: [PATCH] Migrated the rest of the units.

---
 README.md                                 | 48 ++++++++++-------------
 index.html                                |  4 +-
 scripts/ronin.canvas.js                   |  7 +++-
 scripts/{color.js => unit.color.js}       |  6 +--
 scripts/{position.js => unit.position.js} |  0
 5 files changed, 32 insertions(+), 33 deletions(-)
 rename scripts/{color.js => unit.color.js} (84%)
 rename scripts/{position.js => unit.position.js} (100%)

diff --git a/README.md b/README.md
index ca058d4..63f568e 100644
--- a/README.md
+++ b/README.md
@@ -1,82 +1,76 @@
 #Ronin
 
 ##Canvas
-```  
+```
 @ 600x400                         ; New canvas of size 600w and 400h
 @ 100x100 #ff0000                 ; New canvas of size 100w and 100h with red background
 @ ?                               ; Clear canvas
 ```
 
-##Background
-``` 
-* #ff0000                         ; Fill background with red color
-* ?                               ; Remove background
-``` 
-
 ##History*
-``` 
+```
 ~                                 ; Keep image progress
 ~ 3                               ; Keep image progress into temporary memory with id 3
 ~ ?                               ; Clear history
-``` 
+```
 
 ##Save File
-``` 
+```
 $ new_name.jpg                    ; Create a new file with name
-``` 
+```
 
 ##Load File
-``` 
+```
 / dir/file_name.jpg 10,10 100x100 ; Load image, at 10,10 with size 100x100
 / dir/file_name.jpg 10,10 100x    ; Load image, at 10,10 with size 100w and auto height
 / ~                               ; Load last history id
 / 3                               ; Load history id
-``` 
+```
 
 ##Brush
-``` 
+```
 & 10                              ; Size 10
 & -4                              ; Eraser, Size 4
 & 4 #ff0000                       ; Red brush, Size 4
 & ?                               ; Size 1, black
-``` 
+```
 
 ##Pointers
-``` 
+```
 > 10,0                            ; Add pointer at pos
 > 0,0 400,0                       ; Mirror X, at 400px
 > ?                               ; Remove pointers
-``` 
+```
 
 ##Guides
-``` 
+```
 | 10,10 100x100                   ; Draw a guide
 | -100,0                          ; Draw a grid at every 100px
 | ?                               ; Remove guides
-``` 
+```
 
 ##Translate*
-``` 
+```
 ^ 0,10                            ; Translate 10px vertically
 ^ 20,20 100x100 40,40             ; Translate a specific portion to a specific location
-``` 
+```
 
 ##Zoom*
-``` 
+```
 = 75                              ; Zoom factor
 = ?                               ; Zoom 100%
-``` 
+```
 
 ##Layers*
-``` 
+```
 # 3                               ; Layer 3
 # ?                               ; Layer 1
-``` 
+```
 
 #Units*
-``` 
+```
 5                                 ; 5px
 5,7                               ; 5x 7y
 7x9                               ; 7w 9h
 {5h - 5s}                         ; 5% of canvas width, minus brush speed
-``` 
+```
diff --git a/index.html b/index.html
index 99b2dad..9361c98 100644
--- a/index.html
+++ b/index.html
@@ -3,13 +3,13 @@
     <link rel="stylesheet" type="text/css" href="links/main.css"/>
     
     <script type="text/javascript" src="scripts/unit.rect.js"></script>
+    <script type="text/javascript" src="scripts/unit.color.js"></script>
+    <script type="text/javascript" src="scripts/unit.position.js"></script>
     
     <script type="text/javascript" src="scripts/ronin.module.js"></script>
     <script type="text/javascript" src="scripts/ronin.canvas.js"></script>
     <script type="text/javascript" src="scripts/ronin.overlay.js"></script>
     
-    <script type="text/javascript" src="scripts/position.js"></script>
-    <script type="text/javascript" src="scripts/color.js"></script>
     <script type="text/javascript" src="scripts/pointer.js"></script>
     <script type="text/javascript" src="scripts/brush.js"></script>
     <script type="text/javascript" src="scripts/keyboard.js"></script>
diff --git a/scripts/ronin.canvas.js b/scripts/ronin.canvas.js
index 77e9617..73e347e 100644
--- a/scripts/ronin.canvas.js
+++ b/scripts/ronin.canvas.js
@@ -14,7 +14,12 @@ function Canvas(element)
     
     if(p.length > 1 && p[1].indexOf("#") >= 0){
       var color = new Color(p[1]);
-      console.log("TODO: Fill with color");
+      console.log(color);
+      
+      this.element.getContext('2d').beginPath();
+      this.element.getContext('2d').rect(0, 0, canvas.width, canvas.height);
+      this.element.getContext('2d').fillStyle = color.hex;
+      this.element.getContext('2d').fill();
     }
   }
   
diff --git a/scripts/color.js b/scripts/unit.color.js
similarity index 84%
rename from scripts/color.js
rename to scripts/unit.color.js
index 75ee3c2..13468c9 100644
--- a/scripts/color.js
+++ b/scripts/unit.color.js
@@ -1,10 +1,10 @@
-function Color(val = '000000')
+function Color(hex = '#000000')
 {
-  this.val = val;
+  this.hex = hex;
 
   this.rgb = function()
   {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.val);
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.hex);
     return result ? {
         r: parseInt(result[1], 16),
         g: parseInt(result[2], 16),
diff --git a/scripts/position.js b/scripts/unit.position.js
similarity index 100%
rename from scripts/position.js
rename to scripts/unit.position.js