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 @@
+
+
-
-
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