=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer.js'
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer.js	2015-11-26 08:08:46 +0000
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer.js	2015-12-04 17:10:15 +0000
@@ -275,7 +275,8 @@
 };
 
 /**
- * Adjust the origin for pixel drawing on the canvas.
+ * Adjusts the origin for pixel drawing on the canvas and transforms the stacked clipping regions
+ * by the given x and y factors in order to be consistent with the new coordinates origin.
  *
  * @param    {Number} x
  *           The translate along X-axis.
@@ -286,6 +287,21 @@
 {
    this.origin.x += x;
    this.origin.y += y;
+   
+   var last = 0;
+   while (last < this.state.length)
+   {
+      var s = this.state[last];
+      
+      if (s.clip != undefined)
+      {
+         s.clip.x -= x;
+         s.clip.y -= y;
+         //this.logger.log(last + " clipping regions translated by (" + x + ", " + y + ") = "
+         //                                                             + JSON.stringify(s.clip));
+      }
+      last = last + 1;
+   }
 };
 
 /**
@@ -349,9 +365,9 @@
  *           X coordinate of the left corner of the input region.
  * @param    {Number} ya
  *           Y coordinate of the top corner of the input region.
- * @param    {Number} x2
+ * @param    {Number} xb
  *           X coordinate of the right corner of the input region.
- * @param    {Number} y2
+ * @param    {Number} yb
  *           Y coordinate of the bottom corner of the input region.
  * 
  * @return   {left: xa, top: ya, right: xb, bottom: yb}
@@ -1150,7 +1166,6 @@
 {
    // find the previous clipping rectangle
    var prevClip = this.lastClippedRegion(false);
-   
    if (prevClip != undefined)
    {
       var prevR =
@@ -1240,26 +1255,10 @@
          prevClip.x += this.origin.x;
          prevClip.y += this.origin.y;
       }
-      else
-      {
-         // apply the translations to the previous clip, to make it relative to current origin
-         while (last < this.state.length)
-         {
-            var s = this.state[last];
-            
-            if (s.translate != undefined)
-            {
-               prevClip.x -= s.translate.x;
-               prevClip.y -= s.translate.y;
-            }
-            
-            last = last + 1;
-         }
-       }
-    }
-    
-    return prevClip;
-}
+   }
+   //this.logger.log("lastClippedRegion(" + toScreen + ") = " + JSON.stringify(prevClip));
+   return prevClip;
+};
 
 /**
  * Calculates the intersection of the given line segment with the last clipping region.
@@ -1306,7 +1305,7 @@
       ya = y2;
       yb = y1;
    }
-   
+   // {left : xa, top : ya, right : xb, bottom : yb}
    var clipped = this.clipRegion(xa, ya, xb, yb);
    if (clipped == null)
    {
@@ -1364,6 +1363,7 @@
          if (additional.hasOwnProperty(prop))
          {
             cur[prop] = additional[prop];
+            //this.logger.log("[" + prop + "] = " + JSON.stringify(additional[prop]));
          }
       }
    }

=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js'
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js	2015-12-01 22:44:33 +0000
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js	2015-12-04 16:54:27 +0000
@@ -1081,7 +1081,7 @@
                   offset += 4;
                   yPoints[j] = p2j.socket.readInt32BinaryMessage(message, offset);
                }
-               
+//               extra = " xPoints: " + JSON.stringify(xPoints) + " yPoints: " + JSON.stringify(yPoints);
                this.canvasRenderer.strokePolygon(this.ctx, xPoints, yPoints, numPoints,
                      this.canvasRenderer.rawColor, true);
                break;