SeanSobey · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -36,6 +36,9 @@ jobs:
         vs-version: '15.0'
     - name: NPM install
       run: npm ci
+    - name: Audit
+      run: npm audit
+      continue-on-error: true
     - name: Build
       run: npm run-script build
     - name: Lint

diff --git a/API.md b/API.md
@@ -1,26 +1,80 @@
-<a name="ChartJSNodeCanvas"></a>
+## Classes
+
+<dl>
+<dt><a href="#AnimatedChartJSNodeCanvas">AnimatedChartJSNodeCanvas</a> ⇐ <code><a href="#ChartJSNodeCanvasBase">ChartJSNodeCanvasBase</a></code></dt>
+<dd></dd>
+<dt><a href="#ChartJSNodeCanvas">ChartJSNodeCanvas</a> ⇐ <code><a href="#ChartJSNodeCanvasBase">ChartJSNodeCanvasBase</a></code></dt>
+<dd></dd>
+<dt><a href="#ChartJSNodeCanvasBase">ChartJSNodeCanvasBase</a></dt>
+<dd></dd>
+</dl>
+
+<a name="AnimatedChartJSNodeCanvas"></a>
 
-## ChartJSNodeCanvas
+## AnimatedChartJSNodeCanvas ⇐ [<code>ChartJSNodeCanvasBase</code>](#ChartJSNodeCanvasBase)
 **Kind**: global class  
+**Extends**: [<code>ChartJSNodeCanvasBase</code>](#ChartJSNodeCanvasBase)  
 
-* [ChartJSNodeCanvas](#ChartJSNodeCanvas)
-    * [new ChartJSNodeCanvas(options)](#new_ChartJSNodeCanvas_new)
-    * [.renderToDataURL(configuration, mimeType)](#ChartJSNodeCanvas+renderToDataURL)
-    * [.renderToDataURLSync(configuration, mimeType)](#ChartJSNodeCanvas+renderToDataURLSync)
-    * [.renderToBuffer(configuration, mimeType)](#ChartJSNodeCanvas+renderToBuffer)
-    * [.renderToBufferSync(configuration, mimeType)](#ChartJSNodeCanvas+renderToBufferSync)
-    * [.renderToStream(configuration, mimeType)](#ChartJSNodeCanvas+renderToStream)
-    * [.registerFont(path, options)](#ChartJSNodeCanvas+registerFont)
+* [AnimatedChartJSNodeCanvas](#AnimatedChartJSNodeCanvas) ⇐ [<code>ChartJSNodeCanvasBase</code>](#ChartJSNodeCanvasBase)
+    * [.renderToDataURL(configuration, mimeType)](#AnimatedChartJSNodeCanvas+renderToDataURL)
+    * [.renderToBuffer(configuration, mimeType)](#AnimatedChartJSNodeCanvas+renderToBuffer)
+    * [.registerFont(path, options)](#ChartJSNodeCanvasBase+registerFont)
 
-<a name="new_ChartJSNodeCanvas_new"></a>
+<a name="AnimatedChartJSNodeCanvas+renderToDataURL"></a>
 
-### new ChartJSNodeCanvas(options)
-Create a new instance of CanvasRenderService.
+### animatedChartJSNodeCanvas.renderToDataURL(configuration, mimeType)
+Render to a data url array.
+
+**Kind**: instance method of [<code>AnimatedChartJSNodeCanvas</code>](#AnimatedChartJSNodeCanvas)  
+**See**: https://github.com/Automattic/node-canvas#canvastodataurl  
+
+| Param | Default | Description |
+| --- | --- | --- |
+| configuration |  | The Chart JS configuration for the chart to render. |
+| mimeType | <code>image/png</code> | A string indicating the image format. Valid options are `image/png`, `image/jpeg` (if node-canvas was built with JPEG support), `raw` (unencoded ARGB32 data in native-endian byte order, top-to-bottom), `application/pdf` (for PDF canvases) and image/svg+xml (for SVG canvases). Defaults to `image/png` for image canvases, or the corresponding type for PDF or SVG canvas. |
+
+<a name="AnimatedChartJSNodeCanvas+renderToBuffer"></a>
+
+### animatedChartJSNodeCanvas.renderToBuffer(configuration, mimeType)
+Render to a buffer.
+
+**Kind**: instance method of [<code>AnimatedChartJSNodeCanvas</code>](#AnimatedChartJSNodeCanvas)  
+**See**: https://github.com/Automattic/node-canvas#canvastobuffer  
+
+| Param | Default | Description |
+| --- | --- | --- |
+| configuration |  | The Chart JS configuration for the chart to render. |
+| mimeType | <code>image/png</code> | A string indicating the image format. Valid options are `image/png`, `image/jpeg` (if node-canvas was built with JPEG support) or `raw` (unencoded ARGB32 data in native-endian byte order, top-to-bottom). Defaults to `image/png` for image canvases, or the corresponding type for PDF or SVG canvas. |
+
+<a name="ChartJSNodeCanvasBase+registerFont"></a>
 
+### animatedChartJSNodeCanvas.registerFont(path, options)
+Use to register the font with Canvas to use a font file that is not installed as a system font, this must be done before the Canvas is created.
+
+**Kind**: instance method of [<code>AnimatedChartJSNodeCanvas</code>](#AnimatedChartJSNodeCanvas)  
 
 | Param | Description |
 | --- | --- |
-| options | Configuration for this instance |
+| path | The path to the font file. |
+| options | The font options. |
+
+**Example**  
+```js
+registerFont('comicsans.ttf', { family: 'Comic Sans' });
+```
+<a name="ChartJSNodeCanvas"></a>
+
+## ChartJSNodeCanvas ⇐ [<code>ChartJSNodeCanvasBase</code>](#ChartJSNodeCanvasBase)
+**Kind**: global class  
+**Extends**: [<code>ChartJSNodeCanvasBase</code>](#ChartJSNodeCanvasBase)  
+
+* [ChartJSNodeCanvas](#ChartJSNodeCanvas) ⇐ [<code>ChartJSNodeCanvasBase</code>](#ChartJSNodeCanvasBase)
+    * [.renderToDataURL(configuration, mimeType)](#ChartJSNodeCanvas+renderToDataURL)
+    * [.renderToDataURLSync(configuration, mimeType)](#ChartJSNodeCanvas+renderToDataURLSync)
+    * [.renderToBuffer(configuration, mimeType)](#ChartJSNodeCanvas+renderToBuffer)
+    * [.renderToBufferSync(configuration, mimeType)](#ChartJSNodeCanvas+renderToBufferSync)
+    * [.renderToStream(configuration, mimeType)](#ChartJSNodeCanvas+renderToStream)
+    * [.registerFont(path, options)](#ChartJSNodeCanvasBase+registerFont)
 
 <a name="ChartJSNodeCanvas+renderToDataURL"></a>
 
@@ -87,7 +141,7 @@ Render to a stream.
 | configuration |  | The Chart JS configuration for the chart to render. |
 | mimeType | <code>image/png</code> | A string indicating the image format. Valid options are `image/png`, `image/jpeg` (if node-canvas was built with JPEG support), `application/pdf` (for PDF canvases) and image/svg+xml (for SVG canvases). Defaults to `image/png` for image canvases, or the corresponding type for PDF or SVG canvas. |
 
-<a name="ChartJSNodeCanvas+registerFont"></a>
+<a name="ChartJSNodeCanvasBase+registerFont"></a>
 
 ### chartJSNodeCanvas.registerFont(path, options)
 Use to register the font with Canvas to use a font file that is not installed as a system font, this must be done before the Canvas is created.
@@ -103,3 +157,38 @@ Use to register the font with Canvas to use a font file that is not installed as
 ```js
 registerFont('comicsans.ttf', { family: 'Comic Sans' });
 ```
+<a name="ChartJSNodeCanvasBase"></a>
+
+## ChartJSNodeCanvasBase
+**Kind**: global class  
+
+* [ChartJSNodeCanvasBase](#ChartJSNodeCanvasBase)
+    * [new ChartJSNodeCanvasBase(options)](#new_ChartJSNodeCanvasBase_new)
+    * [.registerFont(path, options)](#ChartJSNodeCanvasBase+registerFont)
+
+<a name="new_ChartJSNodeCanvasBase_new"></a>
+
+### new ChartJSNodeCanvasBase(options)
+Create a new instance of CanvasRenderService.
+
+
+| Param | Description |
+| --- | --- |
+| options | Configuration for this instance |
+
+<a name="ChartJSNodeCanvasBase+registerFont"></a>
+
+### chartJSNodeCanvasBase.registerFont(path, options)
+Use to register the font with Canvas to use a font file that is not installed as a system font, this must be done before the Canvas is created.
+
+**Kind**: instance method of [<code>ChartJSNodeCanvasBase</code>](#ChartJSNodeCanvasBase)  
+
+| Param | Description |
+| --- | --- |
+| path | The path to the font file. |
+| options | The font options. |
+
+**Example**  
+```js
+registerFont('comicsans.ttf', { family: 'Comic Sans' });
+```
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 Migrated to support chart.js v4.x.x, dropped support for 3.x.x
 Upgraded to canvas v3.x.x
+Added support for gradients in the built in background plugin.
 
 WIP support for animated charts, exporting to GIF.
 

diff --git a/README.md b/README.md
@@ -186,6 +186,40 @@ Due to the many issues and question this includes a [convenience plugin](./src/b
 const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, backgroundColour: 'purple' });
 ```
 
+This also supports more complex gradients using a CSS style configuration:
+
+// // Solid color
+// {
+// 	"background": {
+// 	  "type": "solid",
+// 	  "color": "#ff5733"
+// 	}
+// }
+// // Linear gradient
+// {
+// 	"background": {
+// 	  "type": "linear-gradient",
+// 	  "direction": "to right",
+// 	  "colors": [
+// 		{"color": "#ff5733", "position": "0%"},
+// 		{"color": "#33c1ff", "position": "100%"}
+// 	  ]
+// 	}
+// }
+// // Radial gradient
+// {
+// 	"background": {
+// 	  "type": "radial-gradient",
+// 	  "shape": "circle",
+// 	  "size": "farthest-corner",
+// 	  "position": "center",
+// 	  "colors": [
+// 		{"color": "#ff5733", "position": "0%"},
+// 		{"color": "#33c1ff", "position": "100%"}
+// 	  ]
+// 	}
+// }
+
 ### Loading plugins
 
 This library is designed to make loading plugins as simple as possible. For legacy plugins, you should just be able to add the module name to the appropriate array option and the library handles the rest.