Only use Path2D caching when available (#8464)

* Only use Path2D caching when available
* Try to make CC happy

diff --git a/docs/docs/general/performance.md b/docs/docs/general/performance.md
index 29e2a85e1e91eb6f7673106a231edc980f2f8c6e..ff67426c8897cc8fdd0c868b1831ab39f8ed4df7 100644 (file)
--- 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 08aa993b578e5a2af5e0e9d4f4de387f2f2a7bea..3146adef9d690d2638fbfb7ac49f247bcb144e21 100644 (file)
--- 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();