diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js
index 9390b867cf..fbe5747449 100644
--- a/src/core/p5.Renderer2D.js
+++ b/src/core/p5.Renderer2D.js
@@ -272,7 +272,10 @@ class Renderer2D extends Renderer {
     });
     shape.accept(visitor);
     if (this._clipping) {
-      this.clipPath.addPath(visitor.path);
+      const currentTransform = this.drawingContext.getTransform();
+      const clipBaseTransform = this._clipBaseTransform.inverse();
+      const relativeTransform = clipBaseTransform.multiply(currentTransform);
+      this.clipPath.addPath(visitor.path, relativeTransform);
       this.clipPath.closePath();
     } else {
       if (this.states.fillColor) {
@@ -286,7 +289,7 @@ class Renderer2D extends Renderer {
 
   beginClip(options = {}) {
     super.beginClip(options);
-
+    this._clipBaseTransform = this.drawingContext.getTransform();
     // cache the fill style
     this.states.setValue('_cachedFillStyle', this.drawingContext.fillStyle);
     const newFill = this._pInst.color(255, 0).toString();