fix(vpt): move to absolutePointer

fix(vpt): move to `absolutePointer`

test

src/brushes/BaseBrush.ts

@@ -76,6 +76,7 @@ export abstract class BaseBrush<
    * Same as FabricObject `clipPath` property.
    * The clip path is positioned relative to the top left corner of the viewport.
    * The `absolutePositioned` property renders the clip path w/o viewport transform.
+   * The clip path is prone to the `setCoords` gotcha.
    */
   clipPath?: FabricObject;
 
@@ -143,7 +144,7 @@ export abstract class BaseBrush<
   }
 
   transform(ctx: CanvasRenderingContext2D) {
-    ctx.transform(...this.canvas.viewportTransform);
+    // noop
   }
 
   protected needsFullRender() {
@@ -213,8 +214,8 @@ export abstract class BaseBrush<
     ctx.globalCompositeOperation = clipPath.inverted
       ? 'destination-out'
       : 'destination-in';
-    if (clipPath.absolutePositioned) {
-      ctx.transform(...invertTransform(this.canvas.viewportTransform));
+    if (!clipPath.absolutePositioned) {
+      ctx.transform(...this.canvas.viewportTransform);
     }
     clipPath.transform(ctx);
     ctx.scale(1 / clipPath.zoomX, 1 / clipPath.zoomY);
@@ -260,8 +261,11 @@ export abstract class BaseBrush<
     sendObjectToPlane(
       clipPath,
       undefined,
-      this.clipPath.absolutePositioned
-        ? multiplyTransformMatrices(this.canvas.viewportTransform, t)
+      !this.clipPath.absolutePositioned
+        ? multiplyTransformMatrices(
+            invertTransform(this.canvas.viewportTransform),
+            t
+          )
         : t
     );
     return clipPath;
@@ -297,6 +301,7 @@ export abstract class BaseBrush<
         shadow: this.shadow ? new Shadow(this.shadow) : undefined,
         clipPath: await this.createClipPath(shape),
       });
+      sendObjectToPlane(shape, undefined, this.canvas.viewportTransform);
       shape.setCoords();
     }
     this.onEnd(shape);

src/brushes/DrawShapeBase.ts

@@ -45,12 +45,6 @@ export abstract class DrawShapeBase<
     this.setStyles();
   }
 
-  transform(ctx: CanvasRenderingContext2D) {
-    const t = this.canvas.viewportTransform;
-    const offset = new Point().transform(t);
-    ctx.transform(t[0], t[1], t[2], t[3], -offset.x, -offset.y);
-  }
-
   protected _render(ctx: CanvasRenderingContext2D) {
     ctx.save();
     this.shape!.transform(ctx);

src/brushes/PatternBrush.ts

@@ -38,7 +38,7 @@ export class PatternBrush extends PencilBrush {
    * Creates "pattern" instance property
    * @param {CanvasRenderingContext2D} ctx
    */
-  getPattern(ctx: CanvasRenderingContext2D) {
+  protected getPattern(ctx: CanvasRenderingContext2D) {
     return ctx.createPattern(this.source || this.getPatternSrc(), 'repeat');
   }
 

src/brushes/SimpleBrush.ts

@@ -32,7 +32,7 @@ export abstract class SimpleBrush<
   }
 
   protected extractPointer(ev: TFabricEvent<TPointerEventInfo>) {
-    return ev.pointer;
+    return ev.absolutePointer;
   }
 
   protected shouldHandleEvent({ e }: TPointerEventInfo) {

test/unit/draw_shapes.js

@@ -4,7 +4,8 @@
     function fireBrushEvent(brush, type, pointer, { suffix = ':before', e = {} } = {}) {
       brush.fire(`mouse:${type}${suffix}`, fabric.Event.init({
         e,
-        pointer
+        pointer,
+        absolutePointer: brush.canvas._isRetinaScaling() ? brush.canvas.restorePointerVpt(pointer) : pointer
       }));
     }
     hooks.before(() => {

test/visual/freedraw.js

@@ -5,7 +5,8 @@ function setBrush(canvas, brush) {
 function fireBrushEvent(brush, type, pointer) {
   brush.fire(`mouse:${type}:before`, fabric.Event.init({
     e: { pointerId: 1 },
-    pointer
+    pointer,
+    absolutePointer: brush.canvas._isRetinaScaling() ? brush.canvas.restorePointerVpt(pointer) : pointer
   }));
 }
 function pointDrawer(points, brush, onComplete = false, onMove = undefined) {