Added colors to brush.

scripts/brush.js

@@ -7,9 +7,17 @@ function Brush()
   
   this.command = function(p)
   {
-    var position = new Position(parseInt(p[0]),parseInt(p[1]));
-    var pointer = new Pointer(position);
-    brush.add_pointer(pointer);
+    if(p.length > 1){
+      var position = new Position(parseInt(p[0]),parseInt(p[1]));
+      var pointer = new Pointer(position);
+    }
+    
+    if(p.length > 2){
+      var color = new Color(p[2]);
+      pointer = new Pointer(position,color);
+    }
+    
+    this.add_pointer(pointer);
   }
   
   // Pointers

scripts/color.js

@@ -1,7 +1,14 @@
-function Color()
+function Color(val = '000000')
 {
-  this.hex = function()
+  this.val = val;
+
+  this.rgb = function()
   {
-    return '#ff0000';
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.val);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
   }
 }

scripts/commander.js

@@ -27,7 +27,8 @@ function Commander(element,element_input)
     
     // Brush
     if(parts[0] == ":+"){
-      brush.command(parts.shift());
+      parts.shift();
+      brush.command(parts);
     }
     
     this.hide();

scripts/pointer.js

@@ -1,4 +1,4 @@
-function Pointer(offset = new Position(), color = new Color())
+function Pointer(offset = new Position(), color = new Color('000000'))
 {
   this.offset = offset;
   this.color = color;
@@ -9,28 +9,24 @@ function Pointer(offset = new Position(), color = new Color())
   {
     if(!this.position_prev){this.position_prev = this.position(); }
     
-    /* Verteces
-    var id = context.createImageData(1,1);
-    var d  = id.data;
-    d[0]   = 0;
-    d[1]   = 0;
-    d[2]   = 0;
-    d[3]   = 255;
-    context.putImageData(id,this.position().x,this.position().y);
-    */
-    
     context.beginPath();
     context.moveTo(this.position_prev.x,this.position_prev.y);
     context.lineTo(this.position().x,this.position().y);
     context.lineCap="round";
-    var thick = 100 - ((this.position().distance_to(this.position_prev)));
-    context.lineWidth = thick/20;
-    context.strokeStyle = this.color.hex();
+    context.lineWidth = this.thickness();
+    context.strokeStyle = "rgba("+this.color.rgb().r+","+this.color.rgb().g+","+this.color.rgb().b+","+1+")";
     context.stroke();
     
     this.position_prev = this.position();
   }
   
+  this.thickness = function()
+  {
+    var v = 100 - ((this.position().distance_to(this.position_prev)));
+    var t = v/20;
+    return t < 1 ? 1 : t;
+  }
+  
   this.position = function()
   {
     if(this.mirror){