Only use Path2D caching when available (#8464)

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

Author: kurkle

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
 

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();