@pixi/canvas-graphics - npm Package Compare versions

Comparing version 6.0.4 to 6.1.0-rc

dist/browser/canvas-graphics.js

 /*!
  * @pixi/canvas-graphics - v6.0.4
- * Compiled Tue, 11 May 2021 18:00:23 UTC
+ * Compiled Thu, 17 Jun 2021 17:43:07 UTC
  *
@@ -12,2 +12,110 @@ * @pixi/canvas-graphics is licensed under the MIT License.
 
+    /**
+     * Utilities for polygon
+     * @class
+     * @private
+     */
+    var PolygonUtils = /** @class */ (function () {
+        function PolygonUtils() {
+        }
+        /**
+        * Calculate points of an offset polygon
+        * @see {@link http://csharphelper.com/blog/2016/01/enlarge-a-polygon-in-c/}
+        *
+        * @private
+        * @param {number[]} points - polygon coordinates
+        * @param {number} offset
+        * @return {number[]} - offset points
+        */
+        PolygonUtils.offsetPolygon = function (points, offset) {
+            var offsetPoints = [];
+            var length = points.length;
+            offset = PolygonUtils.isPolygonClockwise(points) ? offset : -1 * offset;
+            for (var j = 0; j < length; j += 2) {
+                // Find location for the points before and after j
+                var i = (j - 2);
+                if (i < 0) {
+                    i += length;
+                }
+                var k = (j + 2) % length;
+                // Move the points by the offset
+                var v1x = points[j] - points[i];
+                var v1y = points[j + 1] - points[i + 1];
+                var len = Math.sqrt((v1x * v1x) + (v1y * v1y));
+                v1x /= len;
+                v1y /= len;
+                v1x *= offset;
+                v1y *= offset;
+                var norm1x = -v1y;
+                var norm1y = v1x;
+                var pij1 = [points[i] + norm1x, points[i + 1] + norm1y];
+                var pij2 = [points[j] + norm1x, points[j + 1] + norm1y];
+                var v2x = points[k] - points[j];
+                var v2y = points[k + 1] - points[j + 1];
+                len = Math.sqrt((v2x * v2x) + (v2y * v2y));
+                v2x /= len;
+                v2y /= len;
+                v2x *= offset;
+                v2y *= offset;
+                var norm2x = -v2y;
+                var norm2y = v2x;
+                var pjk1 = [points[j] + norm2x, points[j + 1] + norm2y];
+                var pjk2 = [points[k] + norm2x, points[k + 1] + norm2y];
+                // Find where the shifted lines ij and jk intersect.
+                var intersectPoint = PolygonUtils
+                    .findIntersection(pij1[0], pij1[1], pij2[0], pij2[1], pjk1[0], pjk1[1], pjk2[0], pjk2[1]);
+                if (intersectPoint) {
+                    offsetPoints.push.apply(offsetPoints, intersectPoint);
+                }
+            }
+            return offsetPoints;
+        };
+        /**
+        * Determine the intersection point of two line segments
+        * @see {@link here http://paulbourke.net/geometry/pointlineplane/}
+        *
+        * @private
+        * @param {number} x1 - x-coordinate of start point at first line
+        * @param {number} y1 - y-coordinate of start point at first line
+        * @param {number} x2 - x-coordinate of end point at first line
+        * @param {number} y2 - y-coordinate of end point at first line
+        * @param {number} x3 - x-coordinate of start point at second line
+        * @param {number} y3 - y-coordinate of start point at second line
+        * @param {number} x4 - x-coordinate of end point at second line
+        * @param {number} y4 - y-coordinate of end point at second line
+        * @returns {[number, number] | null} - [x, y] coordinates of intersection
+        */
+        PolygonUtils.findIntersection = function (x1, y1, x2, y2, x3, y3, x4, y4) {
+            var denominator = ((y4 - y3) * (x2 - x1)) - ((x4 - x3) * (y2 - y1));
+            var numeratorA = ((x4 - x3) * (y1 - y3)) - ((y4 - y3) * (x1 - x3));
+            var numeratorB = ((x2 - x1) * (y1 - y3)) - ((y2 - y1) * (x1 - x3));
+            // lines are parallel
+            if (denominator === 0) {
+                // lines are coincident
+                if (numeratorA === 0 && numeratorB === 0) {
+                    return [(x1 + x2) / 2, (y1 + y2) / 2];
+                }
+                return null;
+            }
+            var uA = numeratorA / denominator;
+            return [x1 + (uA * (x2 - x1)), y1 + (uA * (y2 - y1))];
+        };
+        /**
+         * Determine polygon are clockwise or counterclockwise
+         * @see {@link https://stackoverflow.com/questions/1165647}
+         *
+         * @private
+         * @param {number[]} polygon - polygon coordinates
+         * @return {boolean}
+         */
+        PolygonUtils.isPolygonClockwise = function (polygon) {
+            var sum = 0;
+            for (var i = 0; i < polygon.length - 2; i += 2) {
+                sum += (polygon[i + 2] - polygon[i]) * (polygon[i + 3] + polygon[i + 1]);
+            }
+            return sum > 0;
+        };
+        return PolygonUtils;
+    }());
+
     /*
@@ -117,2 +225,3 @@ * @author Mat Groves
                     var py = void 0;
+                    var holesDirection = void 0;
                     context.moveTo(points[0], points[1]);
@@ -126,2 +235,3 @@ for (var j = 2; j < points.length; j += 2) {
                     if (holes.length > 0) {
+                        holesDirection = [];
                         outerArea = 0;
@@ -161,2 +271,3 @@ px = points[0];
                             }
+                            holesDirection[k] = innerArea * outerArea < 0;
                         }
@@ -170,5 +281,3 @@ }
                     if (lineStyle.visible) {
-                        context.globalAlpha = lineStyle.alpha * worldAlpha;
-                        context.strokeStyle = contextStrokeStyle;
-                        context.stroke();
+                        this.paintPolygonStroke(tempShape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context);
                     }
@@ -184,5 +293,8 @@ }
                     if (lineStyle.visible) {
+                        var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                        var width = tempShape.width + (2 * alignmentOffset);
+                        var height = tempShape.height + (2 * alignmentOffset);
                         context.globalAlpha = lineStyle.alpha * worldAlpha;
                         context.strokeStyle = contextStrokeStyle;
-                        context.strokeRect(tempShape.x, tempShape.y, tempShape.width, tempShape.height);
+                        context.strokeRect(tempShape.x - alignmentOffset, tempShape.y - alignmentOffset, width, height);
                     }
@@ -202,2 +314,8 @@ }
                     if (lineStyle.visible) {
+                        if (lineStyle.alignment !== 0.5) {
+                            var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                            context.beginPath();
+                            context.arc(tempShape.x, tempShape.y, tempShape.radius + alignmentOffset, 0, 2 * Math.PI);
+                            context.closePath();
+                        }
                         context.globalAlpha = lineStyle.alpha * worldAlpha;
@@ -209,28 +327,29 @@ context.strokeStyle = contextStrokeStyle;
                 else if (data.type === math.SHAPES.ELIP) {
-                    // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
                     var tempShape = shape;
-                    var w = tempShape.width * 2;
-                    var h = tempShape.height * 2;
-                    var x = tempShape.x - (w / 2);
-                    var y = tempShape.y - (h / 2);
-                    context.beginPath();
-                    var kappa = 0.5522848;
-                    var ox = (w / 2) * kappa; // control point offset horizontal
-                    var oy = (h / 2) * kappa; // control point offset vertical
-                    var xe = x + w; // x-end
-                    var ye = y + h; // y-end
-                    var xm = x + (w / 2); // x-middle
-                    var ym = y + (h / 2); // y-middle
-                    context.moveTo(x, ym);
-                    context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-                    context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-                    context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-                    context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-                    context.closePath();
-                    if (fillStyle.visible) {
-                        context.globalAlpha = fillStyle.alpha * worldAlpha;
-                        context.fillStyle = contextFillStyle;
-                        context.fill();
+                    var drawShapeOverStroke = lineStyle.alignment === 1;
+                    if (!drawShapeOverStroke) {
+                        this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
                     }
                     if (lineStyle.visible) {
+                        if (lineStyle.alignment !== 0.5) {
+                            var kappa = 0.5522848;
+                            var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                            var sW = (tempShape.width + alignmentOffset) * 2;
+                            var sH = (tempShape.height + alignmentOffset) * 2;
+                            var sX = tempShape.x - (sW / 2);
+                            var sY = tempShape.y - (sH / 2);
+                            var sOx = (sW / 2) * kappa;
+                            var sOy = (sH / 2) * kappa;
+                            var sXe = sX + sW;
+                            var sYe = sY + sH;
+                            var sXm = sX + (sW / 2);
+                            var sYm = sY + (sH / 2);
+                            context.beginPath();
+                            context.moveTo(sX, sYm);
+                            context.bezierCurveTo(sX, sYm - sOy, sXm - sOx, sY, sXm, sY);
+                            context.bezierCurveTo(sXm + sOx, sY, sXe, sYm - sOy, sXe, sYm);
+                            context.bezierCurveTo(sXe, sYm + sOy, sXm + sOx, sYe, sXm, sYe);
+                            context.bezierCurveTo(sXm - sOx, sYe, sX, sYm + sOy, sX, sYm);
+                            context.closePath();
+                        }
                         context.globalAlpha = lineStyle.alpha * worldAlpha;
@@ -240,29 +359,38 @@ context.strokeStyle = contextStrokeStyle;
                     }
+                    if (drawShapeOverStroke) {
+                        this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
+                    }
                 }
                 else if (data.type === math.SHAPES.RREC) {
                     var tempShape = shape;
-                    var rx = tempShape.x;
-                    var ry = tempShape.y;
-                    var width = tempShape.width;
-                    var height = tempShape.height;
-                    var radius = tempShape.radius;
-                    var maxRadius = Math.min(width, height) / 2 | 0;
-                    radius = radius > maxRadius ? maxRadius : radius;
-                    context.beginPath();
-                    context.moveTo(rx, ry + radius);
-                    context.lineTo(rx, ry + height - radius);
-                    context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
-                    context.lineTo(rx + width - radius, ry + height);
-                    context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
-                    context.lineTo(rx + width, ry + radius);
-                    context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
-                    context.lineTo(rx + radius, ry);
-                    context.quadraticCurveTo(rx, ry, rx, ry + radius);
-                    context.closePath();
-                    if (fillStyle.visible) {
-                        context.globalAlpha = fillStyle.alpha * worldAlpha;
-                        context.fillStyle = contextFillStyle;
-                        context.fill();
+                    var drawShapeOverStroke = lineStyle.alignment === 1;
+                    if (!drawShapeOverStroke) {
+                        this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
                     }
                     if (lineStyle.visible) {
+                        if (lineStyle.alignment !== 0.5) {
+                            var width = tempShape.width;
+                            var height = tempShape.height;
+                            var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                            var sRx = tempShape.x - alignmentOffset;
+                            var sRy = tempShape.y - alignmentOffset;
+                            var sWidth = tempShape.width + (2 * alignmentOffset);
+                            var sHeight = tempShape.height + (2 * alignmentOffset);
+                            var radiusOffset = alignmentOffset * (lineStyle.alignment >= 1
+                                ? Math.min(sWidth / width, sHeight / height) : Math.min(width / sWidth, height / sHeight));
+                            var sRadius = tempShape.radius + radiusOffset;
+                            var sMaxRadius = Math.min(sWidth, sHeight) / 2 | 0;
+                            sRadius = sRadius > sMaxRadius ? sMaxRadius : sRadius;
+                            context.beginPath();
+                            context.moveTo(sRx, sRy + sRadius);
+                            context.lineTo(sRx, sRy + sHeight - sRadius);
+                            context.quadraticCurveTo(sRx, sRy + sHeight, sRx + sRadius, sRy + sHeight);
+                            context.lineTo(sRx + sWidth - sRadius, sRy + sHeight);
+                            context.quadraticCurveTo(sRx + sWidth, sRy + sHeight, sRx + sWidth, sRy + sHeight - sRadius);
+                            context.lineTo(sRx + sWidth, sRy + sRadius);
+                            context.quadraticCurveTo(sRx + sWidth, sRy, sRx + sWidth - sRadius, sRy);
+                            context.lineTo(sRx + sRadius, sRy);
+                            context.quadraticCurveTo(sRx, sRy, sRx, sRy + sRadius);
+                            context.closePath();
+                        }
                         context.globalAlpha = lineStyle.alpha * worldAlpha;
@@ -272,5 +400,136 @@ context.strokeStyle = contextStrokeStyle;
                     }
+                    if (drawShapeOverStroke) {
+                        this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
+                    }
                 }
             }
         };
+        /**
+         * Paint stroke for polygon and holes
+         *
+         * @private
+         * @param {PIXI.Polygon} shape
+         * @param {PIXI.LineStyle} lineStyle
+         * @param {string|PIXI.CanvasPattern} contextStrokeStyle
+         * @param {GraphicsData[]} holes
+         * @param {boolean[]} holesDirection
+         * @param {number} worldAlpha
+         * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+         */
+        CanvasGraphicsRenderer.prototype.paintPolygonStroke = function (shape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context) {
+            if (lineStyle.alignment !== 0.5) {
+                var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                var offsetPoints = PolygonUtils.offsetPolygon(shape.points, alignmentOffset);
+                var points = void 0;
+                context.beginPath();
+                context.moveTo(offsetPoints[0], offsetPoints[1]);
+                for (var j = 2; j < offsetPoints.length; j += 2) {
+                    context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
+                }
+                if (shape.closeStroke) {
+                    context.closePath();
+                }
+                for (var k = 0; k < holes.length; k++) {
+                    points = holes[k].shape.points;
+                    offsetPoints = PolygonUtils.offsetPolygon(points, alignmentOffset);
+                    if (holesDirection[k]) {
+                        context.moveTo(offsetPoints[0], offsetPoints[1]);
+                        for (var j = 2; j < offsetPoints.length; j += 2) {
+                            context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
+                        }
+                    }
+                    else {
+                        context.moveTo(offsetPoints[offsetPoints.length - 2], offsetPoints[offsetPoints.length - 1]);
+                        for (var j = offsetPoints.length - 4; j >= 0; j -= 2) {
+                            context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
+                        }
+                    }
+                    if (holes[k].shape.closeStroke) {
+                        context.closePath();
+                    }
+                }
+            }
+            context.globalAlpha = lineStyle.alpha * worldAlpha;
+            context.strokeStyle = contextStrokeStyle;
+            context.stroke();
+        };
+        /**
+         * Paint Ellipse
+         *
+         * @private
+         * @param {PIXI.Ellipse} shape
+         * @param {PIXI.FillStyle} fillStyle
+         * @param {PIXI.LineStyle} lineStyle
+         * @param {string|PIXI.CanvasPattern} contextFillStyle
+         * @param {number} worldAlpha
+         * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+         */
+        CanvasGraphicsRenderer.prototype.paintEllipse = function (shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) {
+            // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+            var w = shape.width * 2;
+            var h = shape.height * 2;
+            var x = shape.x - (w / 2);
+            var y = shape.y - (h / 2);
+            var kappa = 0.5522848;
+            var ox = (w / 2) * kappa; // control point offset horizontal
+            var oy = (h / 2) * kappa; // control point offset vertical
+            var xe = x + w; // x-end
+            var ye = y + h; // y-end
+            var xm = x + (w / 2); // x-middle
+            var ym = y + (h / 2); // y-middle
+            context.beginPath();
+            context.moveTo(x, ym);
+            context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+            context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+            context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+            context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+            context.closePath();
+            if (lineStyle.alignment === 0) {
+                context.clip();
+            }
+            if (fillStyle.visible) {
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
+                context.fillStyle = contextFillStyle;
+                context.fill();
+            }
+        };
+        /**
+         * Paint Rounded Rectangle
+         *
+         * @private
+         * @param {PIXI.RoundedRectangle} shape
+         * @param {PIXI.FillStyle} fillStyle
+         * @param {PIXI.LineStyle} lineStyle
+         * @param {string|PIXI.CanvasPattern} contextFillStyle
+         * @param {number} worldAlpha
+         * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+         */
+        CanvasGraphicsRenderer.prototype.paintRoundedRectangle = function (shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) {
+            var rx = shape.x;
+            var ry = shape.y;
+            var width = shape.width;
+            var height = shape.height;
+            var radius = shape.radius;
+            var maxRadius = Math.min(width, height) / 2 | 0;
+            radius = radius > maxRadius ? maxRadius : radius;
+            context.beginPath();
+            context.moveTo(rx, ry + radius);
+            context.lineTo(rx, ry + height - radius);
+            context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
+            context.lineTo(rx + width - radius, ry + height);
+            context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
+            context.lineTo(rx + width, ry + radius);
+            context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
+            context.lineTo(rx + radius, ry);
+            context.quadraticCurveTo(rx, ry, rx, ry + radius);
+            context.closePath();
+            if (lineStyle.alignment === 0) {
+                context.clip();
+            }
+            if (fillStyle.visible) {
+                context.globalAlpha = fillStyle.alpha * worldAlpha;
+                context.fillStyle = contextFillStyle;
+                context.fill();
+            }
+        };
         CanvasGraphicsRenderer.prototype.setPatternTransform = function (pattern, matrix) {
@@ -277,0 +536,0 @@ if (this._svgMatrix === false) {

dist/cjs/canvas-graphics.js

 /*!
  * @pixi/canvas-graphics - v6.0.4
- * Compiled Tue, 11 May 2021 18:00:23 UTC
+ * Compiled Thu, 17 Jun 2021 17:43:07 UTC
  *
@@ -17,2 +17,110 @@ * @pixi/canvas-graphics is licensed under the MIT License.
 
+/**
+ * Utilities for polygon
+ * @class
+ * @private
+ */
+var PolygonUtils = /** @class */ (function () {
+    function PolygonUtils() {
+    }
+    /**
+    * Calculate points of an offset polygon
+    * @see {@link http://csharphelper.com/blog/2016/01/enlarge-a-polygon-in-c/}
+    *
+    * @private
+    * @param {number[]} points - polygon coordinates
+    * @param {number} offset
+    * @return {number[]} - offset points
+    */
+    PolygonUtils.offsetPolygon = function (points, offset) {
+        var offsetPoints = [];
+        var length = points.length;
+        offset = PolygonUtils.isPolygonClockwise(points) ? offset : -1 * offset;
+        for (var j = 0; j < length; j += 2) {
+            // Find location for the points before and after j
+            var i = (j - 2);
+            if (i < 0) {
+                i += length;
+            }
+            var k = (j + 2) % length;
+            // Move the points by the offset
+            var v1x = points[j] - points[i];
+            var v1y = points[j + 1] - points[i + 1];
+            var len = Math.sqrt((v1x * v1x) + (v1y * v1y));
+            v1x /= len;
+            v1y /= len;
+            v1x *= offset;
+            v1y *= offset;
+            var norm1x = -v1y;
+            var norm1y = v1x;
+            var pij1 = [points[i] + norm1x, points[i + 1] + norm1y];
+            var pij2 = [points[j] + norm1x, points[j + 1] + norm1y];
+            var v2x = points[k] - points[j];
+            var v2y = points[k + 1] - points[j + 1];
+            len = Math.sqrt((v2x * v2x) + (v2y * v2y));
+            v2x /= len;
+            v2y /= len;
+            v2x *= offset;
+            v2y *= offset;
+            var norm2x = -v2y;
+            var norm2y = v2x;
+            var pjk1 = [points[j] + norm2x, points[j + 1] + norm2y];
+            var pjk2 = [points[k] + norm2x, points[k + 1] + norm2y];
+            // Find where the shifted lines ij and jk intersect.
+            var intersectPoint = PolygonUtils
+                .findIntersection(pij1[0], pij1[1], pij2[0], pij2[1], pjk1[0], pjk1[1], pjk2[0], pjk2[1]);
+            if (intersectPoint) {
+                offsetPoints.push.apply(offsetPoints, intersectPoint);
+            }
+        }
+        return offsetPoints;
+    };
+    /**
+    * Determine the intersection point of two line segments
+    * @see {@link here http://paulbourke.net/geometry/pointlineplane/}
+    *
+    * @private
+    * @param {number} x1 - x-coordinate of start point at first line
+    * @param {number} y1 - y-coordinate of start point at first line
+    * @param {number} x2 - x-coordinate of end point at first line
+    * @param {number} y2 - y-coordinate of end point at first line
+    * @param {number} x3 - x-coordinate of start point at second line
+    * @param {number} y3 - y-coordinate of start point at second line
+    * @param {number} x4 - x-coordinate of end point at second line
+    * @param {number} y4 - y-coordinate of end point at second line
+    * @returns {[number, number] | null} - [x, y] coordinates of intersection
+    */
+    PolygonUtils.findIntersection = function (x1, y1, x2, y2, x3, y3, x4, y4) {
+        var denominator = ((y4 - y3) * (x2 - x1)) - ((x4 - x3) * (y2 - y1));
+        var numeratorA = ((x4 - x3) * (y1 - y3)) - ((y4 - y3) * (x1 - x3));
+        var numeratorB = ((x2 - x1) * (y1 - y3)) - ((y2 - y1) * (x1 - x3));
+        // lines are parallel
+        if (denominator === 0) {
+            // lines are coincident
+            if (numeratorA === 0 && numeratorB === 0) {
+                return [(x1 + x2) / 2, (y1 + y2) / 2];
+            }
+            return null;
+        }
+        var uA = numeratorA / denominator;
+        return [x1 + (uA * (x2 - x1)), y1 + (uA * (y2 - y1))];
+    };
+    /**
+     * Determine polygon are clockwise or counterclockwise
+     * @see {@link https://stackoverflow.com/questions/1165647}
+     *
+     * @private
+     * @param {number[]} polygon - polygon coordinates
+     * @return {boolean}
+     */
+    PolygonUtils.isPolygonClockwise = function (polygon) {
+        var sum = 0;
+        for (var i = 0; i < polygon.length - 2; i += 2) {
+            sum += (polygon[i + 2] - polygon[i]) * (polygon[i + 3] + polygon[i + 1]);
+        }
+        return sum > 0;
+    };
+    return PolygonUtils;
+}());
+
 /*
@@ -122,2 +230,3 @@ * @author Mat Groves
                 var py = void 0;
+                var holesDirection = void 0;
                 context.moveTo(points[0], points[1]);
@@ -131,2 +240,3 @@ for (var j = 2; j < points.length; j += 2) {
                 if (holes.length > 0) {
+                    holesDirection = [];
                     outerArea = 0;
@@ -166,2 +276,3 @@ px = points[0];
                         }
+                        holesDirection[k] = innerArea * outerArea < 0;
                     }
@@ -175,5 +286,3 @@ }
                 if (lineStyle.visible) {
-                    context.globalAlpha = lineStyle.alpha * worldAlpha;
-                    context.strokeStyle = contextStrokeStyle;
-                    context.stroke();
+                    this.paintPolygonStroke(tempShape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context);
                 }
@@ -189,5 +298,8 @@ }
                 if (lineStyle.visible) {
+                    var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                    var width = tempShape.width + (2 * alignmentOffset);
+                    var height = tempShape.height + (2 * alignmentOffset);
                     context.globalAlpha = lineStyle.alpha * worldAlpha;
                     context.strokeStyle = contextStrokeStyle;
-                    context.strokeRect(tempShape.x, tempShape.y, tempShape.width, tempShape.height);
+                    context.strokeRect(tempShape.x - alignmentOffset, tempShape.y - alignmentOffset, width, height);
                 }
@@ -207,2 +319,8 @@ }
                 if (lineStyle.visible) {
+                    if (lineStyle.alignment !== 0.5) {
+                        var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                        context.beginPath();
+                        context.arc(tempShape.x, tempShape.y, tempShape.radius + alignmentOffset, 0, 2 * Math.PI);
+                        context.closePath();
+                    }
                     context.globalAlpha = lineStyle.alpha * worldAlpha;
@@ -214,28 +332,29 @@ context.strokeStyle = contextStrokeStyle;
             else if (data.type === math.SHAPES.ELIP) {
-                // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
                 var tempShape = shape;
-                var w = tempShape.width * 2;
-                var h = tempShape.height * 2;
-                var x = tempShape.x - (w / 2);
-                var y = tempShape.y - (h / 2);
-                context.beginPath();
-                var kappa = 0.5522848;
-                var ox = (w / 2) * kappa; // control point offset horizontal
-                var oy = (h / 2) * kappa; // control point offset vertical
-                var xe = x + w; // x-end
-                var ye = y + h; // y-end
-                var xm = x + (w / 2); // x-middle
-                var ym = y + (h / 2); // y-middle
-                context.moveTo(x, ym);
-                context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-                context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-                context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-                context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-                context.closePath();
-                if (fillStyle.visible) {
-                    context.globalAlpha = fillStyle.alpha * worldAlpha;
-                    context.fillStyle = contextFillStyle;
-                    context.fill();
+                var drawShapeOverStroke = lineStyle.alignment === 1;
+                if (!drawShapeOverStroke) {
+                    this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
                 }
                 if (lineStyle.visible) {
+                    if (lineStyle.alignment !== 0.5) {
+                        var kappa = 0.5522848;
+                        var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                        var sW = (tempShape.width + alignmentOffset) * 2;
+                        var sH = (tempShape.height + alignmentOffset) * 2;
+                        var sX = tempShape.x - (sW / 2);
+                        var sY = tempShape.y - (sH / 2);
+                        var sOx = (sW / 2) * kappa;
+                        var sOy = (sH / 2) * kappa;
+                        var sXe = sX + sW;
+                        var sYe = sY + sH;
+                        var sXm = sX + (sW / 2);
+                        var sYm = sY + (sH / 2);
+                        context.beginPath();
+                        context.moveTo(sX, sYm);
+                        context.bezierCurveTo(sX, sYm - sOy, sXm - sOx, sY, sXm, sY);
+                        context.bezierCurveTo(sXm + sOx, sY, sXe, sYm - sOy, sXe, sYm);
+                        context.bezierCurveTo(sXe, sYm + sOy, sXm + sOx, sYe, sXm, sYe);
+                        context.bezierCurveTo(sXm - sOx, sYe, sX, sYm + sOy, sX, sYm);
+                        context.closePath();
+                    }
                     context.globalAlpha = lineStyle.alpha * worldAlpha;
@@ -245,29 +364,38 @@ context.strokeStyle = contextStrokeStyle;
                 }
+                if (drawShapeOverStroke) {
+                    this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
+                }
             }
             else if (data.type === math.SHAPES.RREC) {
                 var tempShape = shape;
-                var rx = tempShape.x;
-                var ry = tempShape.y;
-                var width = tempShape.width;
-                var height = tempShape.height;
-                var radius = tempShape.radius;
-                var maxRadius = Math.min(width, height) / 2 | 0;
-                radius = radius > maxRadius ? maxRadius : radius;
-                context.beginPath();
-                context.moveTo(rx, ry + radius);
-                context.lineTo(rx, ry + height - radius);
-                context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
-                context.lineTo(rx + width - radius, ry + height);
-                context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
-                context.lineTo(rx + width, ry + radius);
-                context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
-                context.lineTo(rx + radius, ry);
-                context.quadraticCurveTo(rx, ry, rx, ry + radius);
-                context.closePath();
-                if (fillStyle.visible) {
-                    context.globalAlpha = fillStyle.alpha * worldAlpha;
-                    context.fillStyle = contextFillStyle;
-                    context.fill();
+                var drawShapeOverStroke = lineStyle.alignment === 1;
+                if (!drawShapeOverStroke) {
+                    this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
                 }
                 if (lineStyle.visible) {
+                    if (lineStyle.alignment !== 0.5) {
+                        var width = tempShape.width;
+                        var height = tempShape.height;
+                        var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                        var sRx = tempShape.x - alignmentOffset;
+                        var sRy = tempShape.y - alignmentOffset;
+                        var sWidth = tempShape.width + (2 * alignmentOffset);
+                        var sHeight = tempShape.height + (2 * alignmentOffset);
+                        var radiusOffset = alignmentOffset * (lineStyle.alignment >= 1
+                            ? Math.min(sWidth / width, sHeight / height) : Math.min(width / sWidth, height / sHeight));
+                        var sRadius = tempShape.radius + radiusOffset;
+                        var sMaxRadius = Math.min(sWidth, sHeight) / 2 | 0;
+                        sRadius = sRadius > sMaxRadius ? sMaxRadius : sRadius;
+                        context.beginPath();
+                        context.moveTo(sRx, sRy + sRadius);
+                        context.lineTo(sRx, sRy + sHeight - sRadius);
+                        context.quadraticCurveTo(sRx, sRy + sHeight, sRx + sRadius, sRy + sHeight);
+                        context.lineTo(sRx + sWidth - sRadius, sRy + sHeight);
+                        context.quadraticCurveTo(sRx + sWidth, sRy + sHeight, sRx + sWidth, sRy + sHeight - sRadius);
+                        context.lineTo(sRx + sWidth, sRy + sRadius);
+                        context.quadraticCurveTo(sRx + sWidth, sRy, sRx + sWidth - sRadius, sRy);
+                        context.lineTo(sRx + sRadius, sRy);
+                        context.quadraticCurveTo(sRx, sRy, sRx, sRy + sRadius);
+                        context.closePath();
+                    }
                     context.globalAlpha = lineStyle.alpha * worldAlpha;
@@ -277,5 +405,136 @@ context.strokeStyle = contextStrokeStyle;
                 }
+                if (drawShapeOverStroke) {
+                    this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
+                }
             }
         }
     };
+    /**
+     * Paint stroke for polygon and holes
+     *
+     * @private
+     * @param {PIXI.Polygon} shape
+     * @param {PIXI.LineStyle} lineStyle
+     * @param {string|PIXI.CanvasPattern} contextStrokeStyle
+     * @param {GraphicsData[]} holes
+     * @param {boolean[]} holesDirection
+     * @param {number} worldAlpha
+     * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+     */
+    CanvasGraphicsRenderer.prototype.paintPolygonStroke = function (shape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context) {
+        if (lineStyle.alignment !== 0.5) {
+            var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+            var offsetPoints = PolygonUtils.offsetPolygon(shape.points, alignmentOffset);
+            var points = void 0;
+            context.beginPath();
+            context.moveTo(offsetPoints[0], offsetPoints[1]);
+            for (var j = 2; j < offsetPoints.length; j += 2) {
+                context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
+            }
+            if (shape.closeStroke) {
+                context.closePath();
+            }
+            for (var k = 0; k < holes.length; k++) {
+                points = holes[k].shape.points;
+                offsetPoints = PolygonUtils.offsetPolygon(points, alignmentOffset);
+                if (holesDirection[k]) {
+                    context.moveTo(offsetPoints[0], offsetPoints[1]);
+                    for (var j = 2; j < offsetPoints.length; j += 2) {
+                        context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
+                    }
+                }
+                else {
+                    context.moveTo(offsetPoints[offsetPoints.length - 2], offsetPoints[offsetPoints.length - 1]);
+                    for (var j = offsetPoints.length - 4; j >= 0; j -= 2) {
+                        context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
+                    }
+                }
+                if (holes[k].shape.closeStroke) {
+                    context.closePath();
+                }
+            }
+        }
+        context.globalAlpha = lineStyle.alpha * worldAlpha;
+        context.strokeStyle = contextStrokeStyle;
+        context.stroke();
+    };
+    /**
+     * Paint Ellipse
+     *
+     * @private
+     * @param {PIXI.Ellipse} shape
+     * @param {PIXI.FillStyle} fillStyle
+     * @param {PIXI.LineStyle} lineStyle
+     * @param {string|PIXI.CanvasPattern} contextFillStyle
+     * @param {number} worldAlpha
+     * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+     */
+    CanvasGraphicsRenderer.prototype.paintEllipse = function (shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) {
+        // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+        var w = shape.width * 2;
+        var h = shape.height * 2;
+        var x = shape.x - (w / 2);
+        var y = shape.y - (h / 2);
+        var kappa = 0.5522848;
+        var ox = (w / 2) * kappa; // control point offset horizontal
+        var oy = (h / 2) * kappa; // control point offset vertical
+        var xe = x + w; // x-end
+        var ye = y + h; // y-end
+        var xm = x + (w / 2); // x-middle
+        var ym = y + (h / 2); // y-middle
+        context.beginPath();
+        context.moveTo(x, ym);
+        context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+        context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+        context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+        context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+        context.closePath();
+        if (lineStyle.alignment === 0) {
+            context.clip();
+        }
+        if (fillStyle.visible) {
+            context.globalAlpha = fillStyle.alpha * worldAlpha;
+            context.fillStyle = contextFillStyle;
+            context.fill();
+        }
+    };
+    /**
+     * Paint Rounded Rectangle
+     *
+     * @private
+     * @param {PIXI.RoundedRectangle} shape
+     * @param {PIXI.FillStyle} fillStyle
+     * @param {PIXI.LineStyle} lineStyle
+     * @param {string|PIXI.CanvasPattern} contextFillStyle
+     * @param {number} worldAlpha
+     * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+     */
+    CanvasGraphicsRenderer.prototype.paintRoundedRectangle = function (shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) {
+        var rx = shape.x;
+        var ry = shape.y;
+        var width = shape.width;
+        var height = shape.height;
+        var radius = shape.radius;
+        var maxRadius = Math.min(width, height) / 2 | 0;
+        radius = radius > maxRadius ? maxRadius : radius;
+        context.beginPath();
+        context.moveTo(rx, ry + radius);
+        context.lineTo(rx, ry + height - radius);
+        context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
+        context.lineTo(rx + width - radius, ry + height);
+        context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
+        context.lineTo(rx + width, ry + radius);
+        context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
+        context.lineTo(rx + radius, ry);
+        context.quadraticCurveTo(rx, ry, rx, ry + radius);
+        context.closePath();
+        if (lineStyle.alignment === 0) {
+            context.clip();
+        }
+        if (fillStyle.visible) {
+            context.globalAlpha = fillStyle.alpha * worldAlpha;
+            context.fillStyle = contextFillStyle;
+            context.fill();
+        }
+    };
     CanvasGraphicsRenderer.prototype.setPatternTransform = function (pattern, matrix) {
@@ -282,0 +541,0 @@ if (this._svgMatrix === false) {

dist/esm/canvas-graphics.js

 /*!
  * @pixi/canvas-graphics - v6.0.4
- * Compiled Tue, 11 May 2021 18:00:23 UTC
+ * Compiled Thu, 17 Jun 2021 17:43:07 UTC
  *
@@ -13,2 +13,110 @@ * @pixi/canvas-graphics is licensed under the MIT License.
 
+/**
+ * Utilities for polygon
+ * @class
+ * @private
+ */
+var PolygonUtils = /** @class */ (function () {
+    function PolygonUtils() {
+    }
+    /**
+    * Calculate points of an offset polygon
+    * @see {@link http://csharphelper.com/blog/2016/01/enlarge-a-polygon-in-c/}
+    *
+    * @private
+    * @param {number[]} points - polygon coordinates
+    * @param {number} offset
+    * @return {number[]} - offset points
+    */
+    PolygonUtils.offsetPolygon = function (points, offset) {
+        var offsetPoints = [];
+        var length = points.length;
+        offset = PolygonUtils.isPolygonClockwise(points) ? offset : -1 * offset;
+        for (var j = 0; j < length; j += 2) {
+            // Find location for the points before and after j
+            var i = (j - 2);
+            if (i < 0) {
+                i += length;
+            }
+            var k = (j + 2) % length;
+            // Move the points by the offset
+            var v1x = points[j] - points[i];
+            var v1y = points[j + 1] - points[i + 1];
+            var len = Math.sqrt((v1x * v1x) + (v1y * v1y));
+            v1x /= len;
+            v1y /= len;
+            v1x *= offset;
+            v1y *= offset;
+            var norm1x = -v1y;
+            var norm1y = v1x;
+            var pij1 = [points[i] + norm1x, points[i + 1] + norm1y];
+            var pij2 = [points[j] + norm1x, points[j + 1] + norm1y];
+            var v2x = points[k] - points[j];
+            var v2y = points[k + 1] - points[j + 1];
+            len = Math.sqrt((v2x * v2x) + (v2y * v2y));
+            v2x /= len;
+            v2y /= len;
+            v2x *= offset;
+            v2y *= offset;
+            var norm2x = -v2y;
+            var norm2y = v2x;
+            var pjk1 = [points[j] + norm2x, points[j + 1] + norm2y];
+            var pjk2 = [points[k] + norm2x, points[k + 1] + norm2y];
+            // Find where the shifted lines ij and jk intersect.
+            var intersectPoint = PolygonUtils
+                .findIntersection(pij1[0], pij1[1], pij2[0], pij2[1], pjk1[0], pjk1[1], pjk2[0], pjk2[1]);
+            if (intersectPoint) {
+                offsetPoints.push.apply(offsetPoints, intersectPoint);
+            }
+        }
+        return offsetPoints;
+    };
+    /**
+    * Determine the intersection point of two line segments
+    * @see {@link here http://paulbourke.net/geometry/pointlineplane/}
+    *
+    * @private
+    * @param {number} x1 - x-coordinate of start point at first line
+    * @param {number} y1 - y-coordinate of start point at first line
+    * @param {number} x2 - x-coordinate of end point at first line
+    * @param {number} y2 - y-coordinate of end point at first line
+    * @param {number} x3 - x-coordinate of start point at second line
+    * @param {number} y3 - y-coordinate of start point at second line
+    * @param {number} x4 - x-coordinate of end point at second line
+    * @param {number} y4 - y-coordinate of end point at second line
+    * @returns {[number, number] | null} - [x, y] coordinates of intersection
+    */
+    PolygonUtils.findIntersection = function (x1, y1, x2, y2, x3, y3, x4, y4) {
+        var denominator = ((y4 - y3) * (x2 - x1)) - ((x4 - x3) * (y2 - y1));
+        var numeratorA = ((x4 - x3) * (y1 - y3)) - ((y4 - y3) * (x1 - x3));
+        var numeratorB = ((x2 - x1) * (y1 - y3)) - ((y2 - y1) * (x1 - x3));
+        // lines are parallel
+        if (denominator === 0) {
+            // lines are coincident
+            if (numeratorA === 0 && numeratorB === 0) {
+                return [(x1 + x2) / 2, (y1 + y2) / 2];
+            }
+            return null;
+        }
+        var uA = numeratorA / denominator;
+        return [x1 + (uA * (x2 - x1)), y1 + (uA * (y2 - y1))];
+    };
+    /**
+     * Determine polygon are clockwise or counterclockwise
+     * @see {@link https://stackoverflow.com/questions/1165647}
+     *
+     * @private
+     * @param {number[]} polygon - polygon coordinates
+     * @return {boolean}
+     */
+    PolygonUtils.isPolygonClockwise = function (polygon) {
+        var sum = 0;
+        for (var i = 0; i < polygon.length - 2; i += 2) {
+            sum += (polygon[i + 2] - polygon[i]) * (polygon[i + 3] + polygon[i + 1]);
+        }
+        return sum > 0;
+    };
+    return PolygonUtils;
+}());
+
 /*
@@ -118,2 +226,3 @@ * @author Mat Groves
                 var py = void 0;
+                var holesDirection = void 0;
                 context.moveTo(points[0], points[1]);
@@ -127,2 +236,3 @@ for (var j = 2; j < points.length; j += 2) {
                 if (holes.length > 0) {
+                    holesDirection = [];
                     outerArea = 0;
@@ -162,2 +272,3 @@ px = points[0];
                         }
+                        holesDirection[k] = innerArea * outerArea < 0;
                     }
@@ -171,5 +282,3 @@ }
                 if (lineStyle.visible) {
-                    context.globalAlpha = lineStyle.alpha * worldAlpha;
-                    context.strokeStyle = contextStrokeStyle;
-                    context.stroke();
+                    this.paintPolygonStroke(tempShape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context);
                 }
@@ -185,5 +294,8 @@ }
                 if (lineStyle.visible) {
+                    var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                    var width = tempShape.width + (2 * alignmentOffset);
+                    var height = tempShape.height + (2 * alignmentOffset);
                     context.globalAlpha = lineStyle.alpha * worldAlpha;
                     context.strokeStyle = contextStrokeStyle;
-                    context.strokeRect(tempShape.x, tempShape.y, tempShape.width, tempShape.height);
+                    context.strokeRect(tempShape.x - alignmentOffset, tempShape.y - alignmentOffset, width, height);
                 }
@@ -203,2 +315,8 @@ }
                 if (lineStyle.visible) {
+                    if (lineStyle.alignment !== 0.5) {
+                        var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                        context.beginPath();
+                        context.arc(tempShape.x, tempShape.y, tempShape.radius + alignmentOffset, 0, 2 * Math.PI);
+                        context.closePath();
+                    }
                     context.globalAlpha = lineStyle.alpha * worldAlpha;
@@ -210,28 +328,29 @@ context.strokeStyle = contextStrokeStyle;
             else if (data.type === SHAPES.ELIP) {
-                // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
                 var tempShape = shape;
-                var w = tempShape.width * 2;
-                var h = tempShape.height * 2;
-                var x = tempShape.x - (w / 2);
-                var y = tempShape.y - (h / 2);
-                context.beginPath();
-                var kappa = 0.5522848;
-                var ox = (w / 2) * kappa; // control point offset horizontal
-                var oy = (h / 2) * kappa; // control point offset vertical
-                var xe = x + w; // x-end
-                var ye = y + h; // y-end
-                var xm = x + (w / 2); // x-middle
-                var ym = y + (h / 2); // y-middle
-                context.moveTo(x, ym);
-                context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-                context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-                context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-                context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-                context.closePath();
-                if (fillStyle.visible) {
-                    context.globalAlpha = fillStyle.alpha * worldAlpha;
-                    context.fillStyle = contextFillStyle;
-                    context.fill();
+                var drawShapeOverStroke = lineStyle.alignment === 1;
+                if (!drawShapeOverStroke) {
+                    this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
                 }
                 if (lineStyle.visible) {
+                    if (lineStyle.alignment !== 0.5) {
+                        var kappa = 0.5522848;
+                        var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                        var sW = (tempShape.width + alignmentOffset) * 2;
+                        var sH = (tempShape.height + alignmentOffset) * 2;
+                        var sX = tempShape.x - (sW / 2);
+                        var sY = tempShape.y - (sH / 2);
+                        var sOx = (sW / 2) * kappa;
+                        var sOy = (sH / 2) * kappa;
+                        var sXe = sX + sW;
+                        var sYe = sY + sH;
+                        var sXm = sX + (sW / 2);
+                        var sYm = sY + (sH / 2);
+                        context.beginPath();
+                        context.moveTo(sX, sYm);
+                        context.bezierCurveTo(sX, sYm - sOy, sXm - sOx, sY, sXm, sY);
+                        context.bezierCurveTo(sXm + sOx, sY, sXe, sYm - sOy, sXe, sYm);
+                        context.bezierCurveTo(sXe, sYm + sOy, sXm + sOx, sYe, sXm, sYe);
+                        context.bezierCurveTo(sXm - sOx, sYe, sX, sYm + sOy, sX, sYm);
+                        context.closePath();
+                    }
                     context.globalAlpha = lineStyle.alpha * worldAlpha;
@@ -241,29 +360,38 @@ context.strokeStyle = contextStrokeStyle;
                 }
+                if (drawShapeOverStroke) {
+                    this.paintEllipse(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
+                }
             }
             else if (data.type === SHAPES.RREC) {
                 var tempShape = shape;
-                var rx = tempShape.x;
-                var ry = tempShape.y;
-                var width = tempShape.width;
-                var height = tempShape.height;
-                var radius = tempShape.radius;
-                var maxRadius = Math.min(width, height) / 2 | 0;
-                radius = radius > maxRadius ? maxRadius : radius;
-                context.beginPath();
-                context.moveTo(rx, ry + radius);
-                context.lineTo(rx, ry + height - radius);
-                context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
-                context.lineTo(rx + width - radius, ry + height);
-                context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
-                context.lineTo(rx + width, ry + radius);
-                context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
-                context.lineTo(rx + radius, ry);
-                context.quadraticCurveTo(rx, ry, rx, ry + radius);
-                context.closePath();
-                if (fillStyle.visible) {
-                    context.globalAlpha = fillStyle.alpha * worldAlpha;
-                    context.fillStyle = contextFillStyle;
-                    context.fill();
+                var drawShapeOverStroke = lineStyle.alignment === 1;
+                if (!drawShapeOverStroke) {
+                    this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
                 }
                 if (lineStyle.visible) {
+                    if (lineStyle.alignment !== 0.5) {
+                        var width = tempShape.width;
+                        var height = tempShape.height;
+                        var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+                        var sRx = tempShape.x - alignmentOffset;
+                        var sRy = tempShape.y - alignmentOffset;
+                        var sWidth = tempShape.width + (2 * alignmentOffset);
+                        var sHeight = tempShape.height + (2 * alignmentOffset);
+                        var radiusOffset = alignmentOffset * (lineStyle.alignment >= 1
+                            ? Math.min(sWidth / width, sHeight / height) : Math.min(width / sWidth, height / sHeight));
+                        var sRadius = tempShape.radius + radiusOffset;
+                        var sMaxRadius = Math.min(sWidth, sHeight) / 2 | 0;
+                        sRadius = sRadius > sMaxRadius ? sMaxRadius : sRadius;
+                        context.beginPath();
+                        context.moveTo(sRx, sRy + sRadius);
+                        context.lineTo(sRx, sRy + sHeight - sRadius);
+                        context.quadraticCurveTo(sRx, sRy + sHeight, sRx + sRadius, sRy + sHeight);
+                        context.lineTo(sRx + sWidth - sRadius, sRy + sHeight);
+                        context.quadraticCurveTo(sRx + sWidth, sRy + sHeight, sRx + sWidth, sRy + sHeight - sRadius);
+                        context.lineTo(sRx + sWidth, sRy + sRadius);
+                        context.quadraticCurveTo(sRx + sWidth, sRy, sRx + sWidth - sRadius, sRy);
+                        context.lineTo(sRx + sRadius, sRy);
+                        context.quadraticCurveTo(sRx, sRy, sRx, sRy + sRadius);
+                        context.closePath();
+                    }
                     context.globalAlpha = lineStyle.alpha * worldAlpha;
@@ -273,5 +401,136 @@ context.strokeStyle = contextStrokeStyle;
                 }
+                if (drawShapeOverStroke) {
+                    this.paintRoundedRectangle(tempShape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context);
+                }
             }
         }
     };
+    /**
+     * Paint stroke for polygon and holes
+     *
+     * @private
+     * @param {PIXI.Polygon} shape
+     * @param {PIXI.LineStyle} lineStyle
+     * @param {string|PIXI.CanvasPattern} contextStrokeStyle
+     * @param {GraphicsData[]} holes
+     * @param {boolean[]} holesDirection
+     * @param {number} worldAlpha
+     * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+     */
+    CanvasGraphicsRenderer.prototype.paintPolygonStroke = function (shape, lineStyle, contextStrokeStyle, holes, holesDirection, worldAlpha, context) {
+        if (lineStyle.alignment !== 0.5) {
+            var alignmentOffset = lineStyle.width * (0.5 - (1 - lineStyle.alignment));
+            var offsetPoints = PolygonUtils.offsetPolygon(shape.points, alignmentOffset);
+            var points = void 0;
+            context.beginPath();
+            context.moveTo(offsetPoints[0], offsetPoints[1]);
+            for (var j = 2; j < offsetPoints.length; j += 2) {
+                context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
+            }
+            if (shape.closeStroke) {
+                context.closePath();
+            }
+            for (var k = 0; k < holes.length; k++) {
+                points = holes[k].shape.points;
+                offsetPoints = PolygonUtils.offsetPolygon(points, alignmentOffset);
+                if (holesDirection[k]) {
+                    context.moveTo(offsetPoints[0], offsetPoints[1]);
+                    for (var j = 2; j < offsetPoints.length; j += 2) {
+                        context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
+                    }
+                }
+                else {
+                    context.moveTo(offsetPoints[offsetPoints.length - 2], offsetPoints[offsetPoints.length - 1]);
+                    for (var j = offsetPoints.length - 4; j >= 0; j -= 2) {
+                        context.lineTo(offsetPoints[j], offsetPoints[j + 1]);
+                    }
+                }
+                if (holes[k].shape.closeStroke) {
+                    context.closePath();
+                }
+            }
+        }
+        context.globalAlpha = lineStyle.alpha * worldAlpha;
+        context.strokeStyle = contextStrokeStyle;
+        context.stroke();
+    };
+    /**
+     * Paint Ellipse
+     *
+     * @private
+     * @param {PIXI.Ellipse} shape
+     * @param {PIXI.FillStyle} fillStyle
+     * @param {PIXI.LineStyle} lineStyle
+     * @param {string|PIXI.CanvasPattern} contextFillStyle
+     * @param {number} worldAlpha
+     * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+     */
+    CanvasGraphicsRenderer.prototype.paintEllipse = function (shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) {
+        // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+        var w = shape.width * 2;
+        var h = shape.height * 2;
+        var x = shape.x - (w / 2);
+        var y = shape.y - (h / 2);
+        var kappa = 0.5522848;
+        var ox = (w / 2) * kappa; // control point offset horizontal
+        var oy = (h / 2) * kappa; // control point offset vertical
+        var xe = x + w; // x-end
+        var ye = y + h; // y-end
+        var xm = x + (w / 2); // x-middle
+        var ym = y + (h / 2); // y-middle
+        context.beginPath();
+        context.moveTo(x, ym);
+        context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+        context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+        context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+        context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+        context.closePath();
+        if (lineStyle.alignment === 0) {
+            context.clip();
+        }
+        if (fillStyle.visible) {
+            context.globalAlpha = fillStyle.alpha * worldAlpha;
+            context.fillStyle = contextFillStyle;
+            context.fill();
+        }
+    };
+    /**
+     * Paint Rounded Rectangle
+     *
+     * @private
+     * @param {PIXI.RoundedRectangle} shape
+     * @param {PIXI.FillStyle} fillStyle
+     * @param {PIXI.LineStyle} lineStyle
+     * @param {string|PIXI.CanvasPattern} contextFillStyle
+     * @param {number} worldAlpha
+     * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+     */
+    CanvasGraphicsRenderer.prototype.paintRoundedRectangle = function (shape, fillStyle, lineStyle, contextFillStyle, worldAlpha, context) {
+        var rx = shape.x;
+        var ry = shape.y;
+        var width = shape.width;
+        var height = shape.height;
+        var radius = shape.radius;
+        var maxRadius = Math.min(width, height) / 2 | 0;
+        radius = radius > maxRadius ? maxRadius : radius;
+        context.beginPath();
+        context.moveTo(rx, ry + radius);
+        context.lineTo(rx, ry + height - radius);
+        context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
+        context.lineTo(rx + width - radius, ry + height);
+        context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
+        context.lineTo(rx + width, ry + radius);
+        context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
+        context.lineTo(rx + radius, ry);
+        context.quadraticCurveTo(rx, ry, rx, ry + radius);
+        context.closePath();
+        if (lineStyle.alignment === 0) {
+            context.clip();
+        }
+        if (fillStyle.visible) {
+            context.globalAlpha = fillStyle.alpha * worldAlpha;
+            context.fillStyle = contextFillStyle;
+            context.fill();
+        }
+    };
     CanvasGraphicsRenderer.prototype.setPatternTransform = function (pattern, matrix) {
@@ -278,0 +537,0 @@ if (this._svgMatrix === false) {

index.d.ts

@@ -37,2 +37,39 @@ /// <reference path="./global.d.ts" />
     render(graphics: Graphics): void;
+    /**
+     * Paint stroke for polygon and holes
+     *
+     * @private
+     * @param {PIXI.Polygon} shape
+     * @param {PIXI.LineStyle} lineStyle
+     * @param {string|PIXI.CanvasPattern} contextStrokeStyle
+     * @param {GraphicsData[]} holes
+     * @param {boolean[]} holesDirection
+     * @param {number} worldAlpha
+     * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+     */
+    private paintPolygonStroke;
+    /**
+     * Paint Ellipse
+     *
+     * @private
+     * @param {PIXI.Ellipse} shape
+     * @param {PIXI.FillStyle} fillStyle
+     * @param {PIXI.LineStyle} lineStyle
+     * @param {string|PIXI.CanvasPattern} contextFillStyle
+     * @param {number} worldAlpha
+     * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+     */
+    private paintEllipse;
+    /**
+     * Paint Rounded Rectangle
+     *
+     * @private
+     * @param {PIXI.RoundedRectangle} shape
+     * @param {PIXI.FillStyle} fillStyle
+     * @param {PIXI.LineStyle} lineStyle
+     * @param {string|PIXI.CanvasPattern} contextFillStyle
+     * @param {number} worldAlpha
+     * @param {PIXI.CrossPlatformCanvasRenderingContext2D} context
+     */
+    private paintRoundedRectangle;
     setPatternTransform(pattern: CanvasPattern, matrix: Matrix): void;
@@ -39,0 +76,0 @@ /**

package.json

 {
   "name": "@pixi/canvas-graphics",
-  "version": "6.0.4",
+  "version": "6.1.0-rc",
   "main": "dist/cjs/canvas-graphics.js",
@@ -28,10 +28,10 @@ "module": "dist/esm/canvas-graphics.js",
   "dependencies": {
-    "@pixi/canvas-display": "6.0.4",
-    "@pixi/canvas-renderer": "6.0.4",
-    "@pixi/constants": "6.0.4",
-    "@pixi/core": "6.0.4",
-    "@pixi/graphics": "6.0.4",
-    "@pixi/math": "6.0.4"
+    "@pixi/canvas-display": "6.1.0-rc",
+    "@pixi/canvas-renderer": "6.1.0-rc",
+    "@pixi/constants": "6.1.0-rc",
+    "@pixi/core": "6.1.0-rc",
+    "@pixi/graphics": "6.1.0-rc",
+    "@pixi/math": "6.1.0-rc"
   },
-  "gitHead": "2ece475553e843c59a291339231f6c1866fab4db"
+  "gitHead": "f95c9649c797fa7da7a66584a0a5c3b792eb30cf"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

244160

increased by8.18%

Lines of code

1917

increased by61.36%

Worsened metrics

Number of package files

11

decreased by-35.29%

Dependency changes

• + Added@pixi/canvas-display@6.1.0-rc(transitive)

• + Added@pixi/canvas-renderer@6.1.0-rc(transitive)

• + Added@pixi/constants@6.1.0-rc(transitive)

• + Added@pixi/core@6.1.0-rc(transitive)

• + Added@pixi/display@6.1.0-rc(transitive)

• + Added@pixi/graphics@6.1.0-rc(transitive)

• + Added@pixi/math@6.1.0-rc(transitive)

• + Added@pixi/runner@6.1.0-rc(transitive)

• + Added@pixi/settings@6.1.0-rc(transitive)

• + Added@pixi/sprite@6.1.0-rc(transitive)

• + Added@pixi/ticker@6.1.0-rc(transitive)

• + Added@pixi/utils@6.1.0-rc(transitive)

• + Addedhas-symbols@1.1.0(transitive)

• - Removed@pixi/canvas-display@6.0.4(transitive)

• - Removed@pixi/canvas-renderer@6.0.4(transitive)

• - Removed@pixi/constants@6.0.4(transitive)

• - Removed@pixi/core@6.0.4(transitive)

• - Removed@pixi/display@6.0.4(transitive)

• - Removed@pixi/graphics@6.0.4(transitive)

• - Removed@pixi/math@6.0.4(transitive)

• - Removed@pixi/runner@6.0.4(transitive)

• - Removed@pixi/settings@6.0.4(transitive)

• - Removed@pixi/sprite@6.0.4(transitive)

• - Removed@pixi/ticker@6.0.4(transitive)

• - Removed@pixi/utils@6.0.4(transitive)

• - Removedhas-symbols@1.0.3(transitive)

• Updated@pixi/canvas-display@6.1.0-rc

• Updated@pixi/canvas-renderer@6.1.0-rc

• Updated@pixi/constants@6.1.0-rc

• Updated@pixi/core@6.1.0-rc

• Updated@pixi/graphics@6.1.0-rc

• Updated@pixi/math@6.1.0-rc