WebWorker support

docs/general/performance.md

@@ -69,6 +69,42 @@ There are many approaches to data decimation and selection of an algorithm will
 
 Line charts are able to do [automatic data decimation during draw](#automatic-data-decimation-during-draw), when certain conditions are met. You should still consider decimating data yourself before passing it in for maximum performance since the automatic decimation occurs late in the chart life cycle.
 
+## Render Chart.js in a web worker (Chrome only)
+
+Chome (in version 69) added the ability to [transfer rendering control of a canvas](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen) to a web worker. Web workers can use the [OffscreenCanvas API](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) to render from a web worker onto canvases in the DOM. Chart.js is a canvas-based library and supports rendering in a web worker - just pass an OffscreenCanvas into the Chart constructor instead of a Canvas element. Note that as of today, this API is only supported in Chrome.
+
+By moving all Chart.js calculations onto a separate thread, the main thread can be freed up for other uses. Some tips and tricks when using Chart.js in a web worker:
+* Transferring data between threads can be expensive, so ensure that your config and data objects are as small as possible. Try generating them on the worker side if you can (workers can make HTTP requests!) or passing them to your worker as ArrayBuffers, which can be transferred quickly from one thread to another.
+* You can't transfer functions between threads, so if your config object includes functions you'll have to strip them out before transferring and then add them back later.
+* You can't access the DOM from worker threads, so Chart.js plugins that use the DOM (including any mouse interactions) will likely not work.
+* Ensure that you have a fallback if you support browsers other than the most modern Chrome browser.
+* Resizing the chart must be done manually. See an example in the worker code below.
+
+Example main thread code:
+
+```javascript
+const config = {};
+const canvas = new HTMLCanvasElement();
+const offscreenCanvas = canvas.transferControlToOffscreen();
+
+const worker = new Worker('worker.js');
+worker.postMessage({canvas: offscreenCanvas, config}, [offscreenCanvas]);
+```
+
+Example worker code, in `worker.js`:
+
+```javascript
+onmessage = function(event) {
+    const {canvas, config} = event.data;
+    const chart = new Chart(canvas, config);
+
+    // Resizing the chart must be done manually, since OffscreenCanvas does not include event listeners.
+    canvas.width = 100;
+    canvas.height = 100;
+    chart.resize();
+};
+```
+
 ## Line Charts
 
 ### Disable Bezier Curves

src/core/core.controller.js

@@ -151,7 +151,7 @@ function onAnimationProgress(ctx) {
 }
 
 function isDomSupported() {
-	return typeof window !== undefined && typeof document !== undefined;
+	return typeof window !== 'undefined' && typeof document !== 'undefined';
 }
 
 /**
@@ -282,9 +282,7 @@ export default class Chart {
 	_initializePlatform(canvas, config) {
 		if (config.platform) {
 			return new config.platform();
-		} else if (!isDomSupported()) {
-			return new BasicPlatform();
-		} else if (window.OffscreenCanvas && canvas instanceof window.OffscreenCanvas) {
+		} else if (!isDomSupported() || (typeof OffscreenCanvas !== 'undefined' && canvas instanceof OffscreenCanvas)) {
 			return new BasicPlatform();
 		}
 		return new DomPlatform();
@@ -327,8 +325,10 @@ export default class Chart {
 
 		canvas.width = me.width = newWidth;
 		canvas.height = me.height = newHeight;
-		canvas.style.width = newWidth + 'px';
-		canvas.style.height = newHeight + 'px';
+		if (canvas.style) {
+			canvas.style.width = newWidth + 'px';
+			canvas.style.height = newHeight + 'px';
+		}
 
 		helpers.dom.retinaScale(me, newRatio);
 

src/helpers/helpers.dom.js

@@ -123,7 +123,10 @@ export function getRelativePosition(evt, chart) {
 export function getMaximumWidth(domNode) {
 	const container = _getParentNode(domNode);
 	if (!container) {
-		return domNode.clientWidth;
+		if (typeof domNode.clientWidth === 'number') {
+			return domNode.clientWidth;
+		}
+		return domNode.width;
 	}
 
 	const clientWidth = container.clientWidth;
@@ -138,7 +141,10 @@ export function getMaximumWidth(domNode) {
 export function getMaximumHeight(domNode) {
 	const container = _getParentNode(domNode);
 	if (!container) {
-		return domNode.clientHeight;
+		if (typeof domNode.clientHeight === 'number') {
+			return domNode.clientHeight;
+		}
+		return domNode.height;
 	}
 
 	const clientHeight = container.clientHeight;
@@ -161,7 +167,7 @@ export function retinaScale(chart, forceRatio) {
 	// If no style has been set on the canvas, the render size is used as display size,
 	// making the chart visually bigger, so let's enforce it to the "correct" values.
 	// See https://github.com/chartjs/Chart.js/issues/3575
-	if (!canvas.style.height && !canvas.style.width) {
+	if (canvas.style && !canvas.style.height && !canvas.style.width) {
 		canvas.style.height = height + 'px';
 		canvas.style.width = width + 'px';
 	}