=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer_webgl.js'
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer_webgl.js	2020-11-03 19:09:39 +0000
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer_webgl.js	2020-11-06 12:44:44 +0000
@@ -1969,6 +1969,17 @@
          }
       }
    }
+   else
+   {
+      var renderer = this.glStrokesManager.getStrokePathRenderer(this, this.strokeStyleId,
+            this.strokeWidth, color);
+      
+      renderer.beginStroke();
+      this.drawLineSegment(x, y, x + width, y, renderer);
+      this.drawLineSegment(x + width, y + 1, x + width, y + height, renderer);
+      this.drawLineSegment(x + width - 1, y + height, x + 1, y + height, renderer);
+      this.drawLineSegment(x, y + height, x, y + 1, renderer);// close the path
+   }
 };
 
 /**

=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.webgl.js'
--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.webgl.js	2020-10-28 16:53:59 +0000
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.webgl.js	2020-11-06 13:25:02 +0000
@@ -344,12 +344,29 @@
     */
    function DotsPathRenderer(canvasRenderer, basicStroke, strokeColor)
    {
-      var pixel = canvasRenderer.createImageData(1, 1);
+      var state = {};
+      var width = basicStroke.getWidth();
+      var pixel = canvasRenderer.createImageData(width, width);
       var pixelData = pixel.data;
-      pixelData[3] = 0xFF;
-      var state = {};
-      var color = strokeColor.concat([255]);
-      var width = basicStroke.getWidth();
+      
+      var length = 4 * width * width;
+
+      // Fill a line image with the given stroke color
+      pixelData[0] = strokeColor[0];
+      pixelData[1] = strokeColor[1];
+      pixelData[2] = strokeColor[2];
+      pixelData[3] = 255;
+
+      var pos = 4;
+      var seqLen = 4;
+      while(pos < length)
+      {
+         pixelData.copyWithin(pos, 0, seqLen);
+         // increment position by the length of the current segment
+         pos += seqLen;
+         // double the length of the next segment
+         seqLen <<= 1;
+      }
       
       /**
        * Normalizes a dash offset distance according to the given dash pattern.
@@ -437,9 +454,6 @@
          var x = x1;
          var y = y1;
          var triangles = [];
-         var dots = [];
-         var a;
-         var b;
          // precondition: y2 should be greater or equal than y1.
          while(x <= x2 && y <= y2)
          {
@@ -448,35 +462,12 @@
                idx    = (idx + 1) % len;
                rest   = state.dash[idx];
                dashOn = !dashOn;
-               if (dots.length > 0)
-               {
-                  a = dots[0];
-                  b = dots.pop();
-                  dots.length = 0;
-                  if (dx === 0)
-                  {
-                     triangles.push([a.x, a.y, a.x + width, a.y, b.x, b.y, color[0], color[1], color[2], color[3]]);
-                     triangles.push([b.x, b.y, b.x + width, b.y, a.x + width, a.y, color[0], color[1], color[2], color[3]]);
-                  }
-                  else
-                  {
-                     triangles.push([a.x, a.y, a.x, a.y + width, b.x, b.y, color[0], color[1], color[2], color[3]]);
-                     triangles.push([b.x, b.y, b.x, b.y + width, a.x, a.y + width, color[0], color[1], color[2], color[3]]);
-                  }
-               }
             }
             rest -= 1;
             
             if (dashOn)
             {
-               dots.push({x:x,y:y});
-               // fill a pixel and put it on the canvas.
-//               pixelData[0] = strokeColor[0];
-//               pixelData[1] = strokeColor[1];
-//               pixelData[2] = strokeColor[2];
-
-               // TODO
-               //canvasRenderer.putImageData(pixel, x, y);
+               canvasRenderer.drawImage(x, y, width, width, pixelData);
             }
             // vertical line: increase Y-coordinate
             if (dx === 0)
@@ -519,13 +510,7 @@
          rest -= 1;
          if (dashOn)
          {
-            // fill a pixel and put it on the canvas.
-            pixelData[0] = strokeColor[0];
-            pixelData[1] = strokeColor[1];
-            pixelData[2] = strokeColor[2];
-
-            // TODO
-            //canvasRenderer.putImageData(pixel, x, y);
+            canvasRenderer.drawImage(x, y, width, width, pixelData);
          }
          // save the dash pattern state in order to continue this dash pattern for next drawings 
          state.dashOn = dashOn;

