From b467c0d79e335f650c39f5416e0344b942c9617a Mon Sep 17 00:00:00 2001
From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Sat, 20 Feb 2021 19:30:13 +0200
Subject: [PATCH] Only use Path2D caching when available (#8464)

* Only use Path2D caching when available
* Try to make CC happy
---
 docs/docs/general/performance.md |  2 +-
 src/elements/element.line.js     | 31 ++++++++++++++++++++++---------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/docs/docs/general/performance.md b/docs/docs/general/performance.md
index 29e2a85e1..ff67426c8 100644
--- a/docs/docs/general/performance.md
+++ b/docs/docs/general/performance.md
@@ -35,7 +35,7 @@ Set the [`ticks.sampleSize`](./axes/cartesian/index.mdx#tick-configuration) opti
 ## Disable Animations
 
 If your charts have long render times, it is a good idea to disable animations. Doing so will mean that the chart needs to only be rendered once during an update instead of multiple times. This will have the effect of reducing CPU usage and improving general page performance.
-Line charts use Path2D caching when animations are disabled.
+Line charts use Path2D caching when animations are disabled and Path2D is available.
 
 To disable animations
 
diff --git a/src/elements/element.line.js b/src/elements/element.line.js
index 08aa993b5..3146adef9 100644
--- a/src/elements/element.line.js
+++ b/src/elements/element.line.js
@@ -198,6 +198,27 @@ function _getInterpolationMethod(options) {
   return _pointInLine;
 }
 
+function strokePathWithCache(ctx, line, start, count) {
+  let path = line._path;
+  if (!path) {
+    path = line._path = new Path2D();
+    if (line.path(path, start, count)) {
+      path.closePath();
+    }
+  }
+  ctx.stroke(path);
+}
+function strokePathDirect(ctx, line, start, count) {
+  ctx.beginPath();
+  if (line.path(ctx, start, count)) {
+    ctx.closePath();
+  }
+  ctx.stroke();
+}
+
+const usePath2D = typeof Path2D === 'function';
+const strokePath = usePath2D ? strokePathWithCache : strokePathDirect;
+
 export default class LineElement extends Element {
 
   constructor(cfg) {
@@ -363,15 +384,7 @@ export default class LineElement extends Element {
 
     setStyle(ctx, options);
 
-    let path = me._path;
-    if (!path) {
-      path = me._path = new Path2D();
-      if (me.path(path, start, count)) {
-        path.closePath();
-      }
-    }
-
-    ctx.stroke(path);
+    strokePath(ctx, me, start, count);
 
     ctx.restore();
 
-- 
2.47.3