fix box-shadow with border-redius attribute

src/render/canvas/canvas-renderer.ts

@@ -5,7 +5,7 @@ import {ElementContainer} from '../../dom/element-container';
 import {BORDER_STYLE} from '../../css/property-descriptors/border-style';
 import {CSSParsedDeclaration} from '../../css/index';
 import {TextContainer} from '../../dom/text-container';
-import {Path, transformPath} from '../path';
+import {Path, transformPath, reversePath } from '../path';
 import {BACKGROUND_CLIP} from '../../css/property-descriptors/background-clip';
 import {BoundCurves, calculateBorderBoxPath, calculateContentBoxPath, calculatePaddingBoxPath} from '../bound-curves';
 import {isBezierCurve} from '../bezier-curve';
@@ -482,12 +482,15 @@ export class CanvasRenderer {
 
     mask(paths: Path[]) {
         this.ctx.beginPath();
+        this.ctx.save();
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
         this.ctx.moveTo(0, 0);
         this.ctx.lineTo(this.canvas.width, 0);
         this.ctx.lineTo(this.canvas.width, this.canvas.height);
         this.ctx.lineTo(0, this.canvas.height);
         this.ctx.lineTo(0, 0);
-        this.formatPath(paths.slice(0).reverse());
+        this.ctx.restore();
+        this.formatPath(reversePath(paths));
         this.ctx.closePath();
     }
 
@@ -663,13 +666,12 @@ export class CanvasRenderer {
             await this.renderBackgroundImage(paint.container);
 
             this.ctx.restore();
-
+            const borderBoxArea = calculateBorderBoxPath(paint.curves);
             styles.boxShadow
                 .slice(0)
                 .reverse()
                 .forEach(shadow => {
                     this.ctx.save();
-                    const borderBoxArea = calculateBorderBoxPath(paint.curves);
                     const maskOffset = shadow.inset ? 0 : MASK_OFFSET;
                     const shadowPaintingArea = transformPath(
                         borderBoxArea,

src/render/path.ts

@@ -8,6 +8,7 @@ export enum PathType {
 export interface IPath {
     type: PathType;
     add(deltaX: number, deltaY: number): IPath;
+    reverse(): IPath;
 }
 
 export const equalPath = (a: Path[], b: Path[]): boolean => {
@@ -34,4 +35,9 @@ export const transformPath = (path: Path[], deltaX: number, deltaY: number, delt
     });
 };
 
+export const reversePath = (path: Path[]) : Path[] => {
+    return path.slice(0).reverse().map((point) => {
+        return point.reverse();
+    });
+}
 export type Path = Vector | BezierCurve;

src/render/vector.ts

@@ -14,6 +14,9 @@ export class Vector implements IPath {
     add(deltaX: number, deltaY: number): Vector {
         return new Vector(this.x + deltaX, this.y + deltaY);
     }
+    reverse(): Vector {
+        return this;
+    }
 }
 
 export const isVector = (path: Path): path is Vector => path.type === PathType.VECTOR;