Add surfaces mapping

1 files changed, 20 insertions, 11 deletions

diff --git a/client.html b/client.html
index 2637ad7..e1da654 100644
--- a/client.html
+++ b/client.html
@@ -56,13 +56,14 @@ function createXHR()
   return null;
 }
 
+var current_color =" #000000";
+var surfaces = {};
+var current_context = 0;
+
 function handleLoad(event)
 {
   cmd = event.target.responseText;
 
-  canvas = document.getElementById("display");
-  context = canvas.getContext("2d");
-
   i = 0;
   while (i < cmd.length) {
     switch (cmd[i]) {
@@ -78,7 +79,7 @@ function handleLoad(event)
 	i = i + size;
         var img = new Image();
 	img.src = url
-        context.drawImage(img, x, y);
+        current_context.drawImage(img, x, y);
 
         break;
 
@@ -96,7 +97,7 @@ function handleLoad(event)
         i = i + 3;
         dy = base64_16(cmd, i);
         i = i + 3;
-        context.drawImage(canvas, sx, sy, w, h, dx, dy, w, h);
+        current_context.drawImage(canvas, sx, sy, w, h, dx, dy, w, h);
 
         break;
 
@@ -110,7 +111,7 @@ function handleLoad(event)
         i = i + 3;
         h = base64_16(cmd, i);
         i = i + 3;
-        context.fillRect(x, y, w, h);
+        current_context.fillRect(x, y, w, h);
 
         break;
 
@@ -120,7 +121,7 @@ function handleLoad(event)
         i = i + 4;
 
         color = '#' + c.toString(16);
-        context.fillStyle = color;
+        current_context.fillStyle = color;
 
         break;
 
@@ -134,7 +135,7 @@ function handleLoad(event)
         b = (c & 0xff);
         alpha = ((c >> 24) & 0xff);
         color = 'rgba(' + r + "," + g + "," + b + "," + (alpha / 255.0) + ')'
-        context.fillStyle = color;
+        current_context.fillStyle = color;
 
         break;
 
@@ -160,12 +161,20 @@ function connect()
   }
 }
 
+function initContext(context)
+{
+  context.fillStyle = current_color;
+  context.globalAlpha = 1.0;
+  context.globalCompositeOperation = "copy"
+}
+
 window.onload = function ()
 {
   canvas = document.getElementById("display");
-  context = canvas.getContext("2d");
-  context.fillStyle = 'rgba(0,0,0,1.0)';
-  context.fillRect(0, 0, context.canvas.width, context.canvas.height);
+  surfaces[0] = canvas;
+  current_context = canvas.getContext("2d");
+  initContext(current_context);
+  current_context.fillRect(0, 0, canvas.width, canvas.height);
 
   connect();
 };