diff --git a/docs/docs/general/performance.md b/docs/docs/general/performance.md
index 29e2a85e1e9..ff67426c889 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 08aa993b578..3146adef9d6 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();