FWD » Core Development » User Interface

=== modified file 'src/com/goldencode/p2j/ui/client/driver/web/res/p2j.clipboard.js'

--- src/com/goldencode/p2j/ui/client/driver/web/res/p2j.clipboard.js	2015-10-14 16:32:09 +0000

+++ src/com/goldencode/p2j/ui/client/driver/web/res/p2j.clipboard.js	2016-02-17 21:22:49 +0000

@@ -84,7 +84,8 @@

       {

          // replace line ends in order to be handled properly on the thin client

          // as if "Enter" was pressed

-         p2j.socket.sendStringBinaryMessage(0x03, text.replace(/\n/g,"\r")); 

+//         p2j.socket.sendStringBinaryMessage(0x03, text.replace(/\n/g,"\r")); 

+         p2j.socket.sendStringBinaryMessage(0x03, text); 

       }

       ctrlv = false;

=== 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	2016-02-17 20:45:29 +0000

+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer.js	2016-02-17 21:22:49 +0000

@@ -24,6 +24,7 @@

 **                  getImageData implementation.

 **     CA  20160129 Removed the "ctx" parameter from the CanvasRenderer APIs.  Added a global 

 **                  cache where widget states are saved.

+**     SBI 20160213 Reduced putImageData invocations for horizontal and vertical lines.

 */

 "use strict";

@@ -92,6 +93,9 @@

    /** True value indicates XOR composite operation will be applied. */

    this.compositeModeOn = false;

+   /** The screen capture used by drawing primitives */

+   this.screenCapture = this.ctx.getImageData(0, 0, 1, 1);

+   

    // force all drawing to be inside pixel "cells" instead of "stradling" between two cells

    // which is the default; this eliminates much of the worst of the anti-aliasing and

    // positioning problems inherent in canvas operations; this will also save off the

@@ -577,17 +581,11 @@

  *           X coordinate of the ending pixel to be drawn.

  * @param    {Number} y2

  *           Y coordinate of the ending pixel to be drawn.

- * @param    {Number[]} color

+ * @param    {StrokeRenderer} strokeRenderer

  *           Array of 3 integer values between 0 and 255 inclusive, representing an RGB color.

- * 

- * @return   {Array} path

- *           The {x:.,y:.} point per a pixel array that represents the drawing line segment.

  */

-CanvasRenderer.prototype.drawLineSegment = function(x1, y1, x2, y2, color)

+CanvasRenderer.prototype.drawLineSegment = function(x1, y1, x2, y2, strokeRenderer)

 {

-   // holds the line pixels to draw

-   var path = [];

-

    x1 = x1 + this.origin.x;

    x2 = x2 + this.origin.x;

@@ -598,7 +596,7 @@

    var d = this.cutLine(x1, y1, x2, y2);

    if (d === null)

    {

-      return path;

+      return;

    }

    x1 = d[0];

    y1 = d[1];

@@ -608,6 +606,38 @@

    var dx = Math.abs(x2 - x1);

    var dy = Math.abs(y2 - y1);

+   // vertical and horizontal lines are handled by the current stroke renderer (optimization)

+   if (dx === 0 || dy === 0)

+   {

+      strokeRenderer.strokeLine(x1, y1, x2, y2);

+   }

+   else

+   {

+      this.drawSlopedLineSegment(x1, y1, x2, y2, strokeRenderer);

+   }

+};

+

+/**

+ * Draw a sloped line in the given color from (x1, y1) to (x2, y2) inclusive, using direct drawing.

+ * <p>

+ * This is an implementation of the well known 50+ year old Bresenham algorithm.

+ *

+ * @param    {Number} x1

+ *           X coordinate of the starting pixel to be drawn.

+ * @param    {Number} y1

+ *           Y coordinate of the starting pixel to be drawn.

+ * @param    {Number} x2

+ *           X coordinate of the ending pixel to be drawn.

+ * @param    {Number} y2

+ *           Y coordinate of the ending pixel to be drawn.

+ * @param    {StrokeRenderer} strokeRenderer

+ *           The current stroke renderer.

+ */

+CanvasRenderer.prototype.drawSlopedLineSegment = function(x1, y1, x2, y2, strokeRenderer)

+{

+   var dx = Math.abs(x2 - x1);

+   var dy = Math.abs(y2 - y1);

+

    var xIncr = x1 < x2 ? 1 : -1;

    var yIncr = y1 < y2 ? 1 : -1;

@@ -618,17 +648,11 @@

    var x = x1;

    var y = y1;

-   

    var tooMany = 0;

-   var directStroke = this.strokesManager.isDirectDrawingStrokeStyle(this.strokeStyleId);

    while (true)

    {

-      if (directStroke)

-      {

-         this.drawPixel(x, y, color);

-      }

-      path.push({x : x, y : y});

+      strokeRenderer.strokePoint(x, y);

       tooMany++;

@@ -640,7 +664,7 @@

       {

          if (tooMany > 10000)

          {

-            this.logger.logFormatted("Bresenham is out of control for x1 = %d, y1 = %d,"

+            renderer.logger.logFormatted("Bresenham is out of control for x1 = %d, y1 = %d,"

                      + " x2 = %d, y2 = %d and current x = %d, y = %d!",[x1, y1, x2, y2, x, y]);

             console.trace();

             break;

@@ -661,11 +685,10 @@

          y   += yIncr;

       }

    }

-   

-   return path;

-};

+}

 /**

+ * 

  * Draw a line in the given color from (x1, y1) to (x2, y2) inclusive, using direct drawing and

  * add its pixels path to the end of the provided pixels path.

  * <p>

@@ -681,22 +704,17 @@

  *           Y coordinate of the ending pixel to be drawn.

  * @param    {Number[]} color

  *           Array of 3 integer values between 0 and 255 inclusive, representing an RGB color.

- * @param    {Array} path

- *           The provided holder of {x:.,y:.} points, the target drawing as a set of sequential

- *           line points will be added at the end of the provided path.

- * @return   {Array}

- *           The {x:.,y:.} point per a pixel array that represents the drawing line segment.

  */

-CanvasRenderer.prototype.drawLine = function(x1, y1, x2, y2, color, path)

+CanvasRenderer.prototype.drawLine = function(x1, y1, x2, y2, color)

 {

-   var segment = this.drawLineSegment(x1, y1, x2, y2, color);

-   Array.prototype.push.apply(path, segment);

-   return segment;

+   var strokeRenderer = this.strokesManager.getStrokePathRenderer(this, this.strokeStyleId,

+         this.strokeWidth, color);

+   strokeRenderer.beginStroke();

+   this.drawLineSegment(x1, y1, x2, y2, strokeRenderer);

 }

 /**

- * Stroke a line in the given color from (x1, y1) to (x2, y2) inclusive, using direct drawing and

- * add its pixels path to the end of the provided pixels path.

+ * Stroke a line in the given color from (x1, y1) to (x2, y2) inclusive.

  * <p>

  * This is an implementation of the well known 50+ year old Bresenham algorithm.

  *

@@ -710,18 +728,13 @@

  *           Y coordinate of the ending pixel to be drawn.

  * @param    {Number[]} color

  *           Array of 3 integer values between 0 and 255 inclusive, representing an RGB color.

- * @param    {Array} path

- *           The provided holder of {x:.,y:.} points, the target drawing as a set of sequential

- *           line points will be added at the end of the provided path.

  */

 CanvasRenderer.prototype.strokeLineSegment = function(x1, y1, x2, y2, color)

 {

-   var path = this.drawLineSegment(x1, y1, x2, y2, color);

-   this.strokesManager.applyStrokeToPath(this,

-         this.strokeStyleId,

-         this.strokeWidth,

-         color,

-         path);

+   var strokeRenderer = this.strokesManager.getStrokePathRenderer(this, this.strokeStyleId,

+         this.strokeWidth, color);

+   strokeRenderer.beginStroke();

+   this.drawLineSegment(x1, y1, x2, y2, strokeRenderer);

 }

 /**

@@ -741,15 +754,11 @@

  *           This will be used for the border lines and when in fill mode, also the interior.

  * @param    {Boolean} fill

  *           <code>true</code> to fill the drawn rectangle with the given color.

- * 

- * @return   {Array} path

- *           The {x:.,y:.} point per a pixel array that represents the rectangle outerline.

  */

 CanvasRenderer.prototype.drawRect = function(x, y, width, height, color, fill)

 {

    // filled rectangles draw 1 pixel smaller in 2 dimensions than stroked rectangles

    var inset = 0;

-   var path  = [];

    // use vector operations for the interior of the rectangle

    if (fill)

    {

@@ -761,12 +770,13 @@

    // now overdraw the stroked portion to eliminate anti-aliasing, we draw in a

    // clockwise direction (since we are not using paths, this is not strictly necessary)

-   this.drawLine(x, y, x + width - inset, y, color, path);

-   this.drawLine(x + width - inset, y + 1, x + width - inset, y + height - inset, color, path);

-   this.drawLine(x + width - 1 - inset, y + height - inset, x + 1, y + height - inset, color, path);

-   this.drawLine(x, y + height - inset, x, y + 1, color, path);// close the path

-   

-   return path;

+   var renderer = this.strokesManager.getStrokePathRenderer(this, this.strokeStyleId,

+         this.strokeWidth, color);

+   renderer.beginStroke();

+   this.drawLineSegment(x, y, x + width - inset, y, renderer);

+   this.drawLineSegment(x + width - inset, y + 1, x + width - inset, y + height - inset, renderer);

+   this.drawLineSegment(x + width - 1 - inset, y + height - inset, x + 1, y + height - inset, renderer);

+   this.drawLineSegment(x, y + height - inset, x, y + 1, renderer);// close the path

 };

 /**

@@ -791,7 +801,6 @@

 {

    // filled rectangles draw 1 pixel smaller in 2 dimensions than stroked rectangles

    var inset = 0;

-   var path  = [];

    // use vector operations for the interior of the rectangle

    if (fill)

    {

@@ -803,16 +812,16 @@

    // now overdraw the stroked portion to eliminate anti-aliasing, we draw in a

    // clockwise direction (since we are not using paths, this is not strictly necessary)

-   this.drawLine(x, y, x + width - inset, y, color, path);

-   this.drawLine(x + width - inset, y + 1, x + width - inset, y + height - inset, color, path);

-   this.drawLine(x + width - 1 - inset, y + height - inset, x + 1, y + height - inset, color, path);

-   this.drawLine(x, y + height - inset, x, y + 1, color, path);// close the path

+   var renderer = this.strokesManager.getStrokePathRenderer(this, this.strokeStyleId,

+         this.strokeWidth, color);

+   renderer.beginStroke();

+   this.drawLineSegment(x, y, x + width - inset, y, renderer);

+   this.drawLineSegment(x + width - inset, y + 1, x + width - inset, y + height - inset,

+         renderer);

+   this.drawLineSegment(x + width - 1 - inset, y + height - inset, x + 1, y + height - inset,

+         renderer);

+   this.drawLineSegment(x, y + height - inset, x, y + 1, renderer);// close the path

-   this.strokesManager.applyStrokeToPath(this,

-         this.strokeStyleId,

-         this.strokeWidth,

-         color,

-         path);

 };

 /**

@@ -860,7 +869,7 @@

    var data = img.data;

    if (p2j.isChrome)

    {

-      copyImage(img, data, imgData, width, height, imgDataOffset);

+      this.copyImage(img, data, imgData, width, height, imgDataOffset);

    }

    else

    {

@@ -920,7 +929,7 @@

  *           Returns the modified screen image data array with the target image.

  *  

  */

-function copyImage(img, data, imgData, width, height, imgDataOffset)

+CanvasRenderer.prototype.copyImage = function(img, data, imgData, width, height, imgDataOffset)

 {

    var awidth  = img.width;

    var aheight = img.height;

@@ -1033,16 +1042,13 @@

    this.renderClosedPath(fill);

    // overdraw the anti-aliased line segments              

-   var path = [];

-   this.drawLine(topLeftX, topLeftY, topRightX, topRightY, color, path);

-   this.drawLine(rightUpX, rightUpY, rightDownX, rightDownY, color, path);

-   this.drawLine(bottomLeftX, bottomLeftY, bottomRightX, bottomRightY, color, path);

-   this.drawLine(leftUpX, leftUpY, leftDownX, leftDownY, color, path);

-   this.strokesManager.applyStrokeToPath(this,

-         this.strokeStyleId,

-         this.strokeWidth,

-         color,

-         path);

+   var renderer = this.strokesManager.getStrokePathRenderer(this, this.strokeStyleId,

+         this.strokeWidth, color);

+   renderer.beginStroke();

+   this.drawLineSegment(topLeftX, topLeftY, topRightX, topRightY, renderer);

+   this.drawLineSegment(rightUpX, rightUpY, rightDownX, rightDownY, renderer);

+   this.drawLineSegment(bottomLeftX, bottomLeftY, bottomRightX, bottomRightY, renderer);

+   this.drawLineSegment(leftUpX, leftUpY, leftDownX, leftDownY, renderer);

 };

 /**

@@ -1108,29 +1114,24 @@

    }

    current = raised ? lighter : darker;

-   

+   var renderer1 = this.strokesManager.getStrokePathRenderer(this, this.strokeStyleId,

+         this.strokeWidth, current);

+   renderer1.beginStroke();

    // draw the top and left sides in the contrasting color (raised mode) or the darker color

    // otherwise

-   var path = [];// create new pixels path to draw

-   this.drawLine(x, y, x + width - 2 - inset, y, current, path);

-   this.drawLine(x, y + 1, x, y + height - 1 - inset, current, path);

-   this.strokesManager.applyStrokeToPath(this,

-         this.strokeStyleId,

-         this.strokeWidth,

-         current,

-         path);

+   this.drawLineSegment(x, y, x + width - 2 - inset, y, renderer1);

+   this.drawLineSegment(x, y + 1, x, y + height - 1 - inset, renderer1);

    // draw the bottom and right sides in the darker color (raised mode) or the contrasting

    // color otherwise

    current = raised ? darker : lighter;

-   path = []; // create new pixels path to draw

-   this.drawLine(x + 1, y + height - 1 - inset, x + width - 1 - inset, y + height - 1 - inset, current, path);

-   this.drawLine(x + width - 1 - inset, y, x + width - 1 - inset, y + height - 2, current, path);

-   this.strokesManager.applyStrokeToPath(this,

-         this.strokeStyleId,

-         this.strokeWidth,

-         current,

-         path);

+   var renderer2 = this.strokesManager.getStrokePathRenderer(this, this.strokeStyleId,

+         this.strokeWidth, current);

+   renderer2.beginStroke();

+   this.drawLineSegment(x + 1, y + height - 1 - inset, x + width - 1 - inset,

+         y + height - 1 - inset, renderer2);

+   this.drawLineSegment(x + width - 1 - inset, y, x + width - 1 - inset, y + height - 2,

+         renderer2);

    // clear the clipping region

    this.ctx.restore();

@@ -1154,8 +1155,6 @@

  * @param    {Boolean} fill

  *           <code>true</code> to fill the rectangle with the current color, otherwise just

  *           stroke the rectangle.

- * @return   {Array}

- *           The {x:.,y:.} point per a pixel array that represents this poligon.

  */

 CanvasRenderer.prototype.drawPolygon = function(xPoints, yPoints, num, color, fill)

 {

@@ -1173,15 +1172,17 @@

       this.ctx.closePath();

       this.renderClosedPath(fill);

    }

-   var path = [];

+   var renderer = this.strokesManager.getStrokePathRenderer(this, this.strokeStyleId,

+         this.strokeWidth, color);

+   renderer.beginStroke();

+

    // now overdraw the stroked portion

    for (i = 0; i < (num - 1); i++)

    {

-      this.drawLine(xPoints[i], yPoints[i], xPoints[i + 1], yPoints[i + 1], color, path);

+      this.drawLineSegment(xPoints[i], yPoints[i], xPoints[i + 1], yPoints[i + 1], renderer);

    }

    // close the path

-   this.drawLine(xPoints[num - 1], yPoints[num - 1], xPoints[0], yPoints[0], color, path);

-   return path;

+   this.drawLineSegment(xPoints[num - 1], yPoints[num - 1], xPoints[0], yPoints[0], renderer);

 };

 /**

@@ -1201,12 +1202,7 @@

  */

 CanvasRenderer.prototype.strokePolygon = function(xPoints, yPoints, num, color, fill)

 {

-   var path = this.drawPolygon(xPoints, yPoints, num, color, fill);

-   this.strokesManager.applyStrokeToPath(this,

-         this.strokeStyleId,

-         this.strokeWidth,

-         color,

-         path);

+   this.drawPolygon(xPoints, yPoints, num, color, fill);

 };

 /**

@@ -1717,7 +1713,7 @@

       var y1 = origY;

       var y2 = y1;

-      this.strokeLineSegment(this.ctx, x1, y1, x2, y2, this.rawColor);

+      this.strokeLineSegment(x1, y1, x2, y2, this.rawColor);

    }

 }

=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.js'

--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.js	2016-02-17 20:45:29 +0000

+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.js	2016-02-17 21:35:30 +0000

@@ -11,6 +11,7 @@

 ** -#- -I- --Date-- ------------------------------Description----------------------------------

 ** 001 SBI 20150819 The first version defines LineStrokes class as a strokes manager.

 ** 002 SBI 20151012 Added XOR processing and dotted large line stroke support.

+** 003 SBI 20160215 Reduced putImageData invocations for horizontal and vertical lines.

 */

 "use strict";

@@ -193,7 +194,7 @@

     * 

     * @return   The stroke path renderer.

     */

-   function getStrokePathRenderer(canvasRenderer, strokeStyle, width, strokeColor)

+   this.getStrokePathRenderer = function(canvasRenderer, strokeStyle, width, strokeColor)

    {

       var basicStroke = getLineStroke(strokeStyle, width);

@@ -207,7 +208,7 @@

          case LineStrokeEnum.DOTTED_LARGE:

             return new DotsPathRenderer(canvasRenderer, basicStroke, strokeColor);

          default:

-            return { applyStroke : function (path) {} };

+            return new DefaultPathRenderer(canvasRenderer, strokeColor);

       }

    };

@@ -244,40 +245,8 @@

          context.lineDashOffset = basicStroke.getDashPhase();

       }

    }

-

-   /**

-    * Apply the given stroke style to the area outer bounds.

-    * 

-    * @param    {CanvasRenderer} canvasRenderer

-    *           The canvas renderer.

-    * @param    {Number} strokeStyle

-    *           The stroke style id.

-    * @param    {Number} width

-    *           The line width.

-    * @param    {Number[]} strokeColor

-    *           The array of 3 integer values between 0 and 255 inclusive, representing

-    *           a stroke color.

-    * @param    {Array} path

-    *           The array of points that forms the outline of the target area.

-    */

-   this.applyStrokeToPath = function(canvasRenderer, strokeStyle, width, strokeColor, path)

-   {

-      var renderer = getStrokePathRenderer(canvasRenderer, strokeStyle, width, strokeColor);

-      renderer.applyStroke(path);

-   }

    /**

-    * Returns true if for the given stroke style it is supposed to draw lines and rectangles

-    * using drawing functions without any corrections of their results, otherwise, false.

-    * 

-    * @return   {boolean} true or false

-    */

-   this.isDirectDrawingStrokeStyle = function(strokeStyle)

-   {

-      return LineStrokeEnum.DEFAULT == strokeStyle;

-   }

-

-   /**

     * Returns the default stroke that is a solid line style with 1 pixel line width.

     * 

     * @return   {Number} The default stroke style.

@@ -288,6 +257,53 @@

    }

    /**

+    * Defines StrokeRenderer class

+    */

+   function StrokeRenderer()

+   {

+   }

+

+   /**

+    * Defines the constructor function

+    */

+   StrokeRenderer.prototype.constructor = StrokeRenderer;

+

+   /**

+    * Prepare the object.

+    */

+   StrokeRenderer.prototype.beginStroke = function()

+   {

+   };

+

+   /**

+    * Apply the stroke to lines given by the absolute coordinates.

+    * 

+    * @param    {Number} x1

+    *           X coordinate of the starting pixel to be drawn.

+    * @param    {Number} y1

+    *           Y coordinate of the starting pixel to be drawn.

+    * @param    {Number} x2

+    *           X coordinate of the ending pixel to be drawn.

+    * @param    {Number} y2

+    *           Y coordinate of the ending pixel to be drawn.

+    */

+   StrokeRenderer.prototype.strokeLine  = function(x1, y1, x2, y2)

+   {

+   };

+   

+   /**

+    * Apply the stroke to the next point given by its coordinates (x, y).

+    * 

+    * @param    {Number} x

+    *           X coordinate of the point to be drawn.

+    * @param    {Number} y

+    *           Y coordinate of the point to be drawn.

+    */

+   StrokeRenderer.prototype.strokePoint = function(x, y)

+   {

+   };

+   

+   /**

     * Used to draw dash patterns on lines of pixels.

     * 

     * @param    {CanvasRenderer} canvasRenderer

@@ -303,6 +319,7 @@

       var pixel = canvasRenderer.createImageData(1, 1);

       var pixelData = pixel.data;

       pixelData[3] = 0xFF;

+      var state = {};

       /**

        * Normalizes a dash offset distance according to the given dash pattern.

@@ -339,12 +356,9 @@

       }

       /**

-       * Apply the given stroke to the line of pixels called a path.

-       * 

-       * @param    {Array} path

-       *           The array of points that forms the outline of the target area.

+       * Prepares the given stroke to be applied to the line of pixels called a path.

        */

-      this.applyStroke = function (path)

+      this.beginStroke = function()

       {

          var dash = basicStroke.getDash();

          if (!dash || dash.length == 0)

@@ -361,28 +375,113 @@

          var idx    = patternObj.startIdx;

          var rest = dash[idx] - phase;

-         for (var i = 0; i < path.length; i++)

+         state.dash   = dash;

+         state.len    = len;

+         state.dashOn = dashOn;

+         state.idx    = idx;

+         state.rest   = rest;

+      }

+      

+      /**

+       * Apply the stroke to vertical or horizontal lines given by the absolute coordinates that

+       * satisfy x1 <= x2 and y1 <= y2.

+       * 

+       * @param    {Number} x1

+       *           X coordinate of the starting pixel to be drawn.

+       * @param    {Number} y1

+       *           Y coordinate of the starting pixel to be drawn.

+       * @param    {Number} x2

+       *           X coordinate of the ending pixel to be drawn.

+       * @param    {Number} y2

+       *           Y coordinate of the ending pixel to be drawn.

+       */

+      this.strokeLine = function(x1, y1, x2, y2)

+      {

+         var rest   = state.rest;

+         var idx    = state.idx;

+         var len    = state.len;

+         var dashOn = state.dashOn;

+         var dash   = state.dash;

+         

+         var dx = x2 - x1;

+         var x = x1;

+         var y = y1;

+         while(x <= x2 && y <= y2)

          {

-            var point = path[i];

             if (rest < 1)

             {

-               idx = (idx + 1) % len;

-               rest = dash[idx];

+               idx    = (idx + 1) % len;

+               rest   = state.dash[idx];

                dashOn = !dashOn;

             }

             rest -= 1;

-

+            

             if (dashOn)

             {

                pixelData[0] = strokeColor[0];

                pixelData[1] = strokeColor[1];

                pixelData[2] = strokeColor[2];

-               canvasRenderer.putImageData(pixel, point.x, point.y);

-            }

-         }

+               canvasRenderer.putImageData(pixel, x, y);

+            }

+            if (dx === 0)

+            {

+               y = y + 1;

+            }

+            else

+            {

+               x = x + 1;

+            }

+         }

+         state.dashOn = dashOn;

+         state.rest   = rest;

+         state.idx    = idx;

+      }

+      

+      /**

+       * Apply the stroke to the next point given by its coordinates (x, y).

+       * 

+       * @param    {Number} x

+       *           X coordinate of the point to be drawn.

+       * @param    {Number} y

+       *           Y coordinate of the point to be drawn.

+       */

+      this.strokePoint = function(x, y)

+      {

+         var rest   = state.rest;

+         var idx    = state.idx;

+         var len    = state.len;

+         var dashOn = state.dashOn;

+         if (rest < 1)

+         {

+            idx    = (idx + 1) % len;

+            rest   = state.dash[idx];

+            dashOn = !dashOn;

+         }

+         rest -= 1;

+         if (dashOn)

+         {

+            pixelData[0] = strokeColor[0];

+            pixelData[1] = strokeColor[1];

+            pixelData[2] = strokeColor[2];

+            canvasRenderer.putImageData(pixel, x, y);

+         }

+         

+         state.dashOn = dashOn;

+         state.rest   = rest;

+         state.idx    = idx;

+      }

+      

+   }

+   

+   /**

+    * DotsPathRenderer implements StrokeRenderer methods

+    */

+   DotsPathRenderer.prototype = Object.create(StrokeRenderer.prototype);

-      }

-   }

+   /**

+    * Defines the constructor function

+    */

+   DotsPathRenderer.prototype.constructor = DotsPathRenderer;

    /**

     * Used to widen lines of pixels.

@@ -408,20 +507,156 @@

          imageData[i + 2] = strokeColor[2];

          imageData[i + 3] = 0xFF;

       }

-

-      /**

-       * To widen the line of pixels called a path according to the stroke style.

-       * 

-       * @param    {Array} path

-       *           The array of points that forms the outline of the target area.

-       */

-      this.applyStroke = function (path)

-      {

-         for (var i = 0; i < path.length; i++)

-         {

-            var point = path[i];

-            canvasRenderer.putImageData(image, point.x - (width >> 1), point.y - (width >> 1));

-         }

-      }

-   }

-}

\ No newline at end of file

+      

+      /**

+       * Prepares the given stroke to be applied to the line of pixels called a path.

+       */

+      this.beginStroke = function()

+      {

+      }

+      

+      /**

+       * Apply the stroke to vertical or horizontal lines given by the absolute coordinates that

+       * satisfy x1 <= x2 and y1 <= y2.

+       * 

+       * @param    {Number} x1

+       *           X coordinate of the starting pixel to be drawn.

+       * @param    {Number} y1

+       *           Y coordinate of the starting pixel to be drawn.

+       * @param    {Number} x2

+       *           X coordinate of the ending pixel to be drawn.

+       * @param    {Number} y2

+       *           Y coordinate of the ending pixel to be drawn.

+       */

+      this.strokeLine = function(x1, y1, x2, y2)

+      {

+         var lineWidth  = x2 - x1 + width;

+         var lineHeight = y2 - y1 + width;

+         var x0 = x1 - (width >> 1);

+         var y0 = y1 - (width >> 1);

+         var screenImage = canvasRenderer.ctx.createImageData(lineWidth, lineHeight);

+         var data = screenImage.data;

+         var length = 4 * lineWidth * lineHeight;

+         

+         for (var i = 0; i < length; i += 4)

+         {

+            data[i]     = strokeColor[0];

+            data[i + 1] = strokeColor[1];

+            data[i + 2] = strokeColor[2];

+            data[i + 3] = 255;

+         }

+         canvasRenderer.putImageData(screenImage, x0, y0);

+      }

+      

+      /**

+       * Apply the stroke to the next point given by its coordinates (x, y).

+       * 

+       * @param    {Number} x

+       *           X coordinate of the point to be drawn.

+       * @param    {Number} y

+       *           Y coordinate of the point to be drawn.

+       */

+      this.strokePoint = function(x, y)

+      {

+         canvasRenderer.putImageData(image, x - (width >> 1), y - (width >> 1));

+      }

+

+   }

+   

+   /**

+    * WidenPathRenderer implements StrokeRenderer methods

+    */

+   WidenPathRenderer.prototype = Object.create(StrokeRenderer.prototype);

+

+   /**

+    * Defines the constructor function

+    */

+   WidenPathRenderer.prototype.constructor = WidenPathRenderer;

+

+   /**

+    * The default lines renderer.

+    * 

+    * @param    {CanvasRenderer} canvasRenderer

+    *           The canvas renderer.

+    * @param    {Number[]} strokeColor

+    *           The array of 3 integer values between 0 and 255 inclusive, representing

+    *           a stroke color.

+    */

+   function DefaultPathRenderer(canvasRenderer, strokeColor)

+   {

+      var width = defaultStroke.getWidth();

+      var image = canvasRenderer.createImageData(width, width);

+      var imageData = image.data;

+      

+      for (var i = 0; i < 4 * width * width; i += 4)

+      {

+         imageData[i]     = strokeColor[0];

+         imageData[i + 1] = strokeColor[1];

+         imageData[i + 2] = strokeColor[2];

+         imageData[i + 3] = 255;

+      }

+      

+      /**

+       * Prepares the given stroke to be applied to the line of pixels called a path.

+       */

+      this.beginStroke = function()

+      {

+      }

+      

+      /**

+       * Apply the stroke to vertical or horizontal lines given by the absolute coordinates that

+       * satisfy x1 <= x2 and y1 <= y2.

+       * 

+       * @param    {Number} x1

+       *           X coordinate of the starting pixel to be drawn.

+       * @param    {Number} y1

+       *           Y coordinate of the starting pixel to be drawn.

+       * @param    {Number} x2

+       *           X coordinate of the ending pixel to be drawn.

+       * @param    {Number} y2

+       *           Y coordinate of the ending pixel to be drawn.

+       */

+      this.strokeLine = function(x1, y1, x2, y2)

+      {

+         var lineWidth  = x2 - x1 + 1;

+         var lineHeight = y2 - y1 + 1;

+         var screenImage = canvasRenderer.ctx.createImageData(lineWidth, lineHeight);

+         var data = screenImage.data;

+         var length = 4 * lineWidth * lineHeight;

+         

+         for (var i = 0; i < length; i += 4)

+         {

+            data[i]     = strokeColor[0];

+            data[i + 1] = strokeColor[1];

+            data[i + 2] = strokeColor[2];

+            data[i + 3] = 255;

+         }

+         canvasRenderer.putImageData(screenImage, x1, y1);

+      }

+      

+      /**

+       * Apply the stroke to the next point given by its coordinates (x, y).

+       * 

+       * @param    {Number} x

+       *           X coordinate of the point to be drawn.

+       * @param    {Number} y

+       *           Y coordinate of the point to be drawn.

+       */

+      this.strokePoint = function(x, y)

+      {

+         canvasRenderer.putImageData(image, x, y);

+      }

+

+   }

+

+   /**

+    * DefaultPathRenderer implements StrokeRenderer methods

+    */

+   DefaultPathRenderer.prototype = Object.create(StrokeRenderer.prototype);

+

+   /**

+    * Defines the constructor function

+    */

+   DefaultPathRenderer.prototype.constructor = DefaultPathRenderer;

+

+}