Reloading the page dont't causes image lost anymore

index.js

@@ -91,6 +91,7 @@ io.on('connection', function (socket){
       port: input_port
     }
   });
+  socket.emit('drawn', canvas_content);
 });
 
 // input socket
@@ -110,7 +111,7 @@ server.on('connection', function (server_socket) {
           if (command[3] != undefined) {
             var color = str_to_color(command[3]);
             if (color !== false) {
-              io.sockets.emit('draw', {type: 'pixel', x: x, y: y, color: color_to_html(color)});
+              io.sockets.emit('draw', {type: 'pixel', x: x, y: y, color: color});
               pixel_count++;
               color_to_canvas_content(x, y, color);
             }
@@ -122,7 +123,7 @@ server.on('connection', function (server_socket) {
     else if (command[0] == 'SIZE') {
       server_socket.write('SIZE ' + canvas_size_x + ' ' + canvas_size_x + '\n');
     }
-    else if (command[1] == 'STATS') {
+    else if (command[0] == 'STATS') {
       server_socket.write('STATS px:' + pixel_count_flat + ' conn:' + conn_count_flat + '\n');
     }
   });

public/main.js

@@ -14,6 +14,7 @@
   var canvas_size_y = 100;
 
   socket.on('setting', onSetting);
+  socket.on('drawn', onDrawn);
   socket.on('draw', onDraw);
   socket.on('stats', onStats);
 
@@ -51,12 +52,11 @@
   }
 
   function drawPixel(x, y, color){
-    context.fillStyle = color;
+    context.fillStyle = '#' + color;
     context.fillRect(x - (canvas.width * (0.5/canvas_size_x)),y - (canvas.height * (0.5/canvas_size_y)), canvas.width * (1/canvas_size_x), canvas.height * (1/canvas_size_y));
   }
 
   function onDraw(data){
-    console.log(data);
     var w = canvas.width;
     var h = canvas.height;
     if (data.type == 'pixel') {
@@ -64,6 +64,21 @@
     }
   }
 
+  function onDrawn(data){
+    console.log(data);
+    var w = canvas.width;
+    var h = canvas.height;
+    data.forEach(function (d, x){
+      if (d !== null) {
+        d.forEach(function (c, y) {
+          if (c !== null) {
+            drawPixel((x / canvas_size_x) * w, (y / canvas_size_y) * h, c);
+          }
+        });
+      }
+    });
+  }
+
   function onStats(data) {
     stats.innerHTML = 'px/s: ' + data.pixel + ' connections: ' + data.connections;
   }

public/style.css

@@ -6,6 +6,7 @@ html, body {
   height: 100%;
   margin: 0;
   padding: 0;
+  color: #ffffff;
 }
 
 .display {
@@ -16,12 +17,13 @@ html, body {
   right: 0;
   bottom: 0;
   top: 0;
+  background-color: #000000;
 }
 
 .stats {
   z-index: 100;
   position: absolute;
-  background-color: #00000022;
+  background-color: #333333aa;
   padding: 3px;
   left: 10px;
   bottom: 10px;
@@ -30,7 +32,7 @@ html, body {
 .play {
   z-index: 100;
   position: absolute;
-  background-color: #00000022;
+  background-color: #333333aa;
   padding: 3px;
   left: 10px;
   right: 10px;