see pr: niklasvh#3110

artificialonlinesao · Feb 9, 2024 · d9d576a · d9d576a
1 parent ac80490
commit d9d576a
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 55 deletions.
diff --git a/examples/blue-box.png b/examples/blue-box.png
diff --git a/examples/demo2.html b/examples/demo2.html
@@ -3,55 +3,17 @@
   <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <style>
-      .feedback-overlay-black{
-        background-color:#000;
-        opacity:0.5;
-        position:absolute;
-        top:0;
-        left:0;
-        width:100%;
-        height:100%;
-        margin:0;
-      }
-
-    </style>
-
-    <style>
-      div{
-        padding:20px;
-        margin:0 auto;
-        border:5px solid black;
-      }
-
-      h1{
-        border-bottom:2px solid white;
-      }
-
-      h2{
-        background: #efefef;
-        padding:10px;
-      }
-
-
-    </style>
+    <link rel="stylesheet" href="./index.css">
   </head>
   <body>
-    <div style="background:red;">
-      <div style="background:green;">
-        <div style="background:blue;border-color:white;">
-          <div style="background:yellow;"><div style="background:orange;"><h1>Heading</h1>
-              Text that isn't wrapped in anything.
-              <p>Followed by some text wrapped in a <b>&lt;p&gt; paragraph.</b> </p>
-              Maybe add a <a href="#">link</a> or a different style of <a href="#" style="background:white;" id="highlight">link with a highlight</a>.
-              <hr />
-              <h2>More content</h2>
-              <div style="width:10px;height:10px;border-width:10px;padding:0;">a</div>
-            </div></div>
-
+    <div class="first-box">
+        asd
+        <div class="second-box">
+            xxx
+            <div class="third-box">
+                asx
+            </div>
         </div>
-
-      </div>
     </div>
     <script type="text/javascript" src="../dist/html2canvas.js"></script>
     <script type="text/javascript">

diff --git a/examples/index.css b/examples/index.css
@@ -0,0 +1,10 @@
+.first-box {
+  width: 500px;
+  height: 500px;
+  background-color: green;
+  background: url('./blue-box.png') no-repeat;
+  /* background-size: contain; */
+  /* background-position: 150px 15px; */
+  /* text-shadow: 5px 5px #558ABB; */
+  box-shadow: 10px 5px 5px 1px rgb(255, 0, 0);
+}
diff --git a/examples/index.less b/examples/index.less
@@ -0,0 +1,17 @@
+.first-box{
+    width: 500px;
+    height: 500px;
+    background-color: green;
+    box-shadow: 10px 5px 5px 1px red;
+    background-size: cover;
+    // .second-box {
+    //     width: 300px;
+    //     height: 300px;
+    //     background-color: green;
+    //     .third-box {
+    //         width: 100px;
+    //         height: 100px;
+    //         background-color: red;
+    //     }
+    // }
+}
diff --git a/examples/record.png b/examples/record.png
diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts
@@ -4,7 +4,7 @@ import {ElementContainer, FLAGS} from '../../dom/element-container';
 import {BORDER_STYLE} from '../../css/property-descriptors/border-style';
 import {CSSParsedDeclaration} from '../../css';
 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 {BezierCurve, isBezierCurve} from '../bezier-curve';
@@ -523,12 +523,16 @@ export class CanvasRenderer extends Renderer {
 
     mask(paths: Path[]): void {
         this.ctx.beginPath();
+        this.ctx.save();
+        // reset transform to identity
+        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();
     }
 
@@ -730,8 +734,8 @@ export class CanvasRenderer extends Renderer {
                     const maskOffset = shadow.inset ? 0 : MASK_OFFSET;
                     const shadowPaintingArea = transformPath(
                         borderBoxArea,
-                        -maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number,
-                        (shadow.inset ? 1 : -1) * shadow.spread.number,
+                        shadow.offsetX.number - maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number,
+                        shadow.offsetY.number + (shadow.inset ? 1 : -1) * shadow.spread.number,
                         shadow.spread.number * (shadow.inset ? -2 : 2),
                         shadow.spread.number * (shadow.inset ? -2 : 2)
                     );
@@ -746,12 +750,14 @@ export class CanvasRenderer extends Renderer {
                         this.path(shadowPaintingArea);
                     }
 
-                    this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset;
-                    this.ctx.shadowOffsetY = shadow.offsetY.number;
+                    this.ctx.shadowOffsetX = maskOffset;
+                    this.ctx.shadowOffsetY = 0;
                     this.ctx.shadowColor = asString(shadow.color);
                     this.ctx.shadowBlur = shadow.blur.number;
-                    this.ctx.fillStyle = shadow.inset ? asString(shadow.color) : 'rgba(0,0,0,1)';
-
+                    this.ctx.fillStyle = asString(shadow.color);
+                    if (shadow.blur.number) {
+                        this.ctx.filter = `blur(${shadow.blur.number}px)`;
+                    }
                     this.ctx.fill();
                     this.ctx.restore();
                 });

diff --git a/src/render/path.ts b/src/render/path.ts
@@ -1,13 +1,14 @@
 import {BezierCurve} from './bezier-curve';
 import {Vector} from './vector';
-export const enum PathType {
+export enum PathType {
     VECTOR = 0,
     BEZIER_CURVE = 1
 }
 
 export interface IPath {
     type: PathType;
     add(deltaX: number, deltaY: number): IPath;
+    reverse(): IPath;
 }
 
 export const equalPath = (a: Path[], b: Path[]): boolean => {
@@ -34,4 +35,13 @@ 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;
diff --git a/src/render/vector.ts b/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;