ensure getComputedStyle always has a valid canvas provided

src/helpers/helpers.dom.ts

@@ -53,7 +53,12 @@ function parseMaxStyle(styleValue: string | number, node: HTMLElement, parentPro
 const getComputedStyle = (element: HTMLElement): CSSStyleDeclaration =>
   element.ownerDocument.defaultView.getComputedStyle(element, null);
 
-export function getStyle(el: HTMLElement, property: string): string {
+// @ts-ignore
+export function getStyle(el?: HTMLElement, property: string): string {
+  if (!el) {
+    return '';
+  }
+
   return getComputedStyle(el).getPropertyValue(property);
 }
 
@@ -105,20 +110,22 @@ function getCanvasPosition(
 
 /**
  * Gets an event's x, y coordinates, relative to the chart area
- * @param event
- * @param chart
  * @returns x and y coordinates of the event
  */
 
 export function getRelativePosition(
   event: Event | ChartEvent | TouchEvent | MouseEvent,
-  chart: Chart
+  chart?: Chart
 ): { x: number; y: number } {
   if ('native' in event) {
     return event;
   }
 
   const {canvas, currentDevicePixelRatio} = chart;
+  if (!canvas) {
+    return {x: 0, y: 0};
+  }
+
   const style = getComputedStyle(canvas);
   const borderBox = style.boxSizing === 'border-box';
   const paddings = getPositionedStyle(style, 'padding');
@@ -138,19 +145,21 @@ export function getRelativePosition(
   };
 }
 
-function getContainerSize(canvas: HTMLCanvasElement, width: number, height: number): Partial<Scale> {
+// @ts-ignore
+function getContainerSize(canvas?: HTMLCanvasElement, width: number, height: number): Partial<Scale> {
   let maxWidth: number, maxHeight: number;
 
   if (width === undefined || height === undefined) {
     const container = canvas && _getParentNode(canvas);
     if (!container) {
-      width = canvas.clientWidth;
-      height = canvas.clientHeight;
+      width = canvas?.clientWidth ?? 0;
+      height = canvas?.clientHeight ?? 0;
     } else {
       const rect = container.getBoundingClientRect(); // this is the border box of the container
       const containerStyle = getComputedStyle(container);
       const containerBorder = getPositionedStyle(containerStyle, 'border', 'width');
       const containerPadding = getPositionedStyle(containerStyle, 'padding');
+
       width = rect.width - containerPadding.width - containerBorder.width;
       height = rect.height - containerPadding.height - containerBorder.height;
       maxWidth = parseMaxStyle(containerStyle.maxWidth, container, 'clientWidth');
@@ -169,11 +178,15 @@ const round1 = (v: number) => Math.round(v * 10) / 10;
 
 // eslint-disable-next-line complexity
 export function getMaximumSize(
-  canvas: HTMLCanvasElement,
+  canvas?: HTMLCanvasElement,
   bbWidth?: number,
   bbHeight?: number,
   aspectRatio?: number
 ): { width: number; height: number } {
+  if (!canvas) {
+    return {width: 0, height: 0};
+  }
+
   const style = getComputedStyle(canvas);
   const margins = getPositionedStyle(style, 'margin');
   const maxWidth = parseMaxStyle(style.maxWidth, canvas, 'clientWidth') || INFINITY;

src/platform/platform.base.js

@@ -51,14 +51,15 @@ export default class BasePlatform {
 
   /**
 	 * Returns the maximum size in pixels of given canvas element.
-	 * @param {HTMLCanvasElement} element
+	 * @param {?HTMLCanvasElement} element
 	 * @param {number} [width] - content width of parent element
 	 * @param {number} [height] - content height of parent element
 	 * @param {number} [aspectRatio] - aspect ratio to maintain
 	 */
   getMaximumSize(element, width, height, aspectRatio) {
-    width = Math.max(0, width || element.width);
-    height = height || element.height;
+    width = Math.max(0, width || (element?.width ?? 0));
+    height = height || (element?.height ?? 0);
+
     return {
       width,
       height: Math.max(0, aspectRatio ? Math.floor(width / aspectRatio) : height)