=== 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-11-06 17:42:48 +0000
+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.webgl.js	2020-11-10 19:02:19 +0000
@@ -282,6 +282,33 @@
       return LineStrokeEnum.DEFAULT;
    }
 
+   function createAndFillPenImage(canvasRenderer, width, color)
+   {
+      var penImage = canvasRenderer.createImageData(width, width);
+      var data = penImage.data;
+      
+      var length = 4 * width * width;
+
+      // Fill first pixel with color
+      data[0] = color[0];
+      data[1] = color[1];
+      data[2] = color[2];
+      data[3] = 255;
+
+      var pos = 4;
+      var seqLen = 4;
+      while(pos < length)
+      {
+         data.copyWithin(pos, 0, seqLen);
+         // increment position by the length of the current segment
+         pos += seqLen;
+         // double the length of the next segment
+         seqLen <<= 1;
+      }
+      
+      return penImage;
+   }
+   
    /**
     * Defines StrokeRenderer class
     */
@@ -346,28 +373,9 @@
    {
       var state = {};
       var width = basicStroke.getWidth();
-      var pixel = canvasRenderer.createImageData(width, width);
+      var pixel = createAndFillPenImage(canvasRenderer, width, strokeColor);
       var pixelData = pixel.data;
       
-      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.
        * A normalized dash offset distance is a distance that is cut the corresponding segment
@@ -543,15 +551,21 @@
     */
    function DefaultPathRenderer(canvasRenderer, basicStroke, strokeColor)
    {
+      var width = basicStroke.getWidth();
+      var pixel = createAndFillPenImage(canvasRenderer, width, strokeColor);
+      var pixelData = pixel.data;
       var color = strokeColor.concat([255]);
-      var width = basicStroke.getWidth();
-
+      /** lines in this path */
+      var lines = [];
+      var count = 0;
       /**
        * Prepares the given stroke to be applied to the line of pixels called a path.
        */
       this.beginStroke = function()
       {
          // TODO: hc
+         lines.length = 0;
+         count = 0;
       }
       
       /**
@@ -569,32 +583,53 @@
        */
       this.strokeLine = function(x1, y1, x2, y2)
       {
+         lines.push([x1, y1, x2, y2]);
+         count++;
          var c1 = color[0];
          var c2 = color[1];
          var c3 = color[2];
          var c4 = color[3];
-         if (!c4)
-         {
-            c4 = 255;
-         }
+         
+         var w = width / 2.0;
 
          if (y1 == y2)
          {
             return [
-               [x1, y1, x1, y1 + width, x2, y2, c1, c2, c3, c4],
-               [x2, y2, x2, y2 + width, x1, y1 + width, c1, c2, c3, c4]
-            ];
+                    [x1, y1, x1, y1 + w, x2, y2, c1, c2, c3, c4],
+                    [x1, y1, x1, y1 - w, x2, y2, c1, c2, c3, c4],
+                    [x2, y2, x2, y2 + w, x1, y1 + w, c1, c2, c3, c4],
+                    [x2, y2, x2, y2 - w, x1, y1 - w, c1, c2, c3, c4]
+                   ];
          }
          else if (x1 == x2)
          {
             return [
-               [x1, y1, x1 + width, y1, x2, y2, c1, c2, c3, c4],
-               [x2, y2, x2 + width, y2, x1 + width, y1, c1, c2, c3, c4]
-            ];
+                    [x1, y1, x1 + w, y1, x2, y2, c1, c2, c3, c4],
+                    [x1, y1, x1 - w, y1, x2, y2, c1, c2, c3, c4],
+                    [x2, y2, x2 + w, y2, x1 + w, y1, c1, c2, c3, c4],
+                    [x2, y2, x2 - w, y2, x1 - w, y1, c1, c2, c3, c4]
+                   ];
          }
          else
          {
-            // TODO: sloped line
+            var a = x2-x1;
+            var b = y2-y1;
+            var l = Math.sqrt(a*a + b*b);
+            //var n = [-b, a];
+            var bx1 = x1 - w*b/l;
+            var by1 = y1 + w*a/l;
+            var cx1 = x1 + w*b/l;
+            var cy1 = y1 - w*a/l;
+            var bx2 = x2 - w*b/l;
+            var by2 = y2 + w*a/l;
+            var cx2 = x2 + w*b/l;
+            var cy2 = y2 - w*a/l;
+            
+            return [ [x1, y1, bx1, by1,   x2, y2, c1, c2, c3, c4],
+                     [x1, y1, cx1, cy1,   x2, y2, c1, c2, c3, c4],
+                     [bx1, by1, bx2, by2, x2, y2, c1, c2, c3, c4],
+                     [cx1, cy1, cx2, cy2, x2, y2, c1, c2, c3, c4]
+                     ];
          }
       }
       
@@ -635,6 +670,7 @@
       this.strokePoint = function(x, y)
       {
          // TODO: hc
+         canvasRenderer.drawImage(x, y, width, width, pixelData);
       }
    }
 

