Radial gradient support

CHANGELOG.md

@@ -1,6 +1,7 @@
 ### Changelog ###
 
 #### v1.0.0-alpha4 - TBD ####
+ * Add support for radial-gradients
  * Fix logging option (#1302)
  * Add support for rendering webgl canvas content (#646)
  * Fix external SVG loading with proxies (#802)

docs/features.md

@@ -11,6 +11,7 @@ Below is a list of all the supported CSS properties and values.
    - background-image
        - url()
        - linear-gradient()
+       - radial-gradient()
    - background-origin 
    - background-position
    - background-size   
@@ -68,7 +69,6 @@ These CSS properties are **NOT** currently supported
  - [filter](https://github.com/niklasvh/html2canvas/issues/493)
  - [font-variant-ligatures](https://github.com/niklasvh/html2canvas/pull/1085)
  - [list-style](https://github.com/niklasvh/html2canvas/issues/177)
- - radial-gradient()
  - [repeating-linear-gradient()](https://github.com/niklasvh/html2canvas/issues/1162)
  - word-break
  - [writing-mode](https://github.com/niklasvh/html2canvas/issues/1258)

src/Gradient.js

@@ -32,19 +32,10 @@ export type ColorStop = {
     stop: number
 };
 
-export type LinearGradient = {
+export interface Gradient {
     type: GradientType,
-    direction: Direction,
     colorStops: Array<ColorStop>
-};
+}
-
-export type RadialGradient = {
-    type: GradientType,
-    shape: RadialGradientShapeType,
-    center: Point,
-    radius: Point,
-    colorStops: Array<ColorStop>
-};
 
 export const GRADIENT_TYPE = {
     LINEAR_GRADIENT: 0,
@@ -68,11 +59,44 @@ const LENGTH_FOR_POSITION = {
     bottom: new Length('100%')
 };
 
+export class LinearGradient implements Gradient {
+    type: GradientType;
+    colorStops: Array<ColorStop>;
+    direction: Direction;
+
+    constructor(colorStops: Array<ColorStop>, direction: Direction) {
+        this.type = GRADIENT_TYPE.LINEAR_GRADIENT;
+        this.colorStops = colorStops;
+        this.direction = direction;
+    }
+}
+
+export class RadialGradient implements Gradient {
+    type: GradientType;
+    colorStops: Array<ColorStop>;
+    shape: RadialGradientShapeType;
+    center: Point;
+    radius: Point;
+
+    constructor(
+        colorStops: Array<ColorStop>,
+        shape: RadialGradientShapeType,
+        center: Point,
+        radius: Point
+    ) {
+        this.type = GRADIENT_TYPE.RADIAL_GRADIENT;
+        this.colorStops = colorStops;
+        this.shape = shape;
+        this.center = center;
+        this.radius = radius;
+    }
+}
+
 export const parseGradient = (
     container: NodeContainer,
     {args, method, prefix}: BackgroundSource,
     bounds: Bounds
-): ?LinearGradient | RadialGradient => {
+): ?Gradient => {
     if (method === 'linear-gradient') {
         return parseLinearGradient(args, bounds, !!prefix);
     } else if (method === 'gradient' && args[0] === 'linear') {
@@ -83,10 +107,11 @@ export const parseGradient = (
             !!prefix
         );
     } else if (method === 'radial-gradient') {
-        if (prefix === '-webkit-') {
+        return parseRadialGradient(
-            args = transformWebkitRadialGradientArgs(args);
+            container,
-        }
+            prefix === '-webkit-' ? transformWebkitRadialGradientArgs(args) : args,
-        return parseRadialGradient(container, args, bounds);
+            bounds
+        );
     } else if (method === 'gradient' && args[0] === 'radial') {
         return parseRadialGradient(
             container,
@@ -176,11 +201,7 @@ const parseLinearGradient = (
         bounds.height * 2
     );
 
-    return {
+    return new LinearGradient(parseColorStops(args, firstColorStopIndex, lineLength), direction);
-        type: GRADIENT_TYPE.LINEAR_GRADIENT,
-        direction,
-        colorStops: parseColorStops(args, firstColorStopIndex, lineLength)
-    };
 };
 
 const parseRadialGradient = (
@@ -238,13 +259,12 @@ const parseRadialGradient = (
         bounds
     );
 
-    return {
+    return new RadialGradient(
-        type: GRADIENT_TYPE.RADIAL_GRADIENT,
+        parseColorStops(args, m ? 1 : 0, Math.min(gradientRadius.x, gradientRadius.y)),
         shape,
-        center: gradientCenter,
+        gradientCenter,
-        radius: gradientRadius,
+        gradientRadius
-        colorStops: parseColorStops(args, m ? 1 : 0, Math.min(gradientRadius.x, gradientRadius.y))
+    );
-    };
 };
 
 const calculateGradientDirection = (radian: number, bounds: Bounds): Direction => {