init

init

Author: ShaMan123

src/canvas/StaticCanvas.ts

@@ -1352,16 +1352,16 @@ export class StaticCanvas<
    * @example <caption>Generate dataURL with objects that overlap a specified object</caption>
    * var myObject;
    * var dataURL = canvas.toDataURL({
-   *   filter: (object) => object.isContainedWithinObject(myObject) || object.intersectsWithObject(myObject)
+   *   filter: (object) => object.isOverlapping(myObject)
    * });
    */
-  toDataURL(options = {} as TDataUrlOptions): string {
-    const {
-      format = 'png',
-      quality = 1,
-      multiplier = 1,
-      enableRetinaScaling = false,
-    } = options;
+  toDataURL({
+    format = 'png',
+    quality = 1,
+    multiplier = 1,
+    enableRetinaScaling = false,
+    ...options
+  }: TDataUrlOptions = {}): string {
     const finalMultiplier =
       multiplier * (enableRetinaScaling ? this.getRetinaScaling() : 1);
 
@@ -1379,7 +1379,7 @@ export class StaticCanvas<
    * This is an intermediary step used to get to a dataUrl but also it is useful to
    * create quick image copies of a canvas without passing for the dataUrl string
    * @param {Number} [multiplier] a zoom factor.
-   * @param {Object} [options] Cropping informations
+   * @param {Object} [options] Cropping information.
    * @param {Number} [options.left] Cropping left offset.
    * @param {Number} [options.top] Cropping top offset.
    * @param {Number} [options.width] Cropping width.
@@ -1388,7 +1388,8 @@ export class StaticCanvas<
    */
   toCanvasElement(
     multiplier = 1,
-    { width, height, left, top, filter } = {} as TToCanvasElementOptions
+    { width, height, left, top, filter }: Partial<TToCanvasElementOptions> = {},
+    canvasEl = createCanvasElement()
   ): HTMLCanvasElement {
     const scaledWidth = (width || this.width) * multiplier,
       scaledHeight = (height || this.height) * multiplier,
@@ -1401,7 +1402,6 @@ export class StaticCanvas<
       translateY = (vp[5] - (top || 0)) * multiplier,
       newVp = [newZoom, 0, 0, newZoom, translateX, translateY] as TMat2D,
       originalRetina = this.enableRetinaScaling,
-      canvasEl = createCanvasElement(),
       objectsToRender = filter
         ? this._objects.filter((obj) => filter(obj))
         : this._objects;

src/shapes/IText/IText.ts

@@ -7,7 +7,11 @@ import {
   keysMap,
   keysMapRtl,
 } from './constants';
-import type { TFiller, TOptions } from '../../typedefs';
+import type {
+  ObjectToCanvasElementOptions,
+  TFiller,
+  TOptions,
+} from '../../typedefs';
 import { classRegistry } from '../../ClassRegistry';
 import type { SerializedTextProps, TextProps } from '../Text/Text';
 import {
@@ -354,7 +358,7 @@ export class IText<
    * @override block cursor/selection logic while rendering the exported canvas
    * @todo this workaround should be replaced with a more robust solution
    */
-  toCanvasElement(options?: any): HTMLCanvasElement {
+  toCanvasElement(options?: ObjectToCanvasElementOptions): HTMLCanvasElement {
     const isEditing = this.isEditing;
     this.isEditing = false;
     const canvas = super.toCanvasElement(options);

src/shapes/Object/Object.ts

@@ -19,6 +19,8 @@ import type {
   TCacheCanvasDimensions,
   Abortable,
   TOptions,
+  ObjectToCanvasElementOptions,
+  ObjectToDataUrlOptions,
 } from '../../typedefs';
 import { classRegistry } from '../../ClassRegistry';
 import { runningAnimations } from '../../util/animation/AnimationRegistry';
@@ -1335,7 +1337,7 @@ export class FabricObject<
    * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2
    * @return {FabricImage} Object cloned as image.
    */
-  cloneAsImage(options: any): FabricImage {
+  cloneAsImage(options?: ObjectToCanvasElementOptions): FabricImage {
     const canvasEl = this.toCanvasElement(options);
     // TODO: how to import Image w/o an import cycle?
     const ImageClass = classRegistry.getClass('image');
@@ -1356,23 +1358,30 @@ export class FabricObject<
    * @param {Boolean} [options.viewportTransform] Account for canvas viewport transform
    * @return {HTMLCanvasElement} Returns DOM element <canvas> with the FabricObject
    */
-  toCanvasElement(options: any = {}) {
+  toCanvasElement({
+    enableRetinaScaling,
+    withoutTransform,
+    withoutShadow,
+    viewportTransform,
+    format,
+    multiplier,
+    canvasElement,
+    ...options
+  }: ObjectToCanvasElementOptions = {}) {
     const origParams = saveObjectTransform(this),
       originalGroup = this.group,
       originalShadow = this.shadow,
-      abs = Math.abs,
-      retinaScaling = options.enableRetinaScaling
+      retinaScaling = enableRetinaScaling
         ? Math.max(config.devicePixelRatio, 1)
-        : 1,
-      multiplier = (options.multiplier || 1) * retinaScaling;
+        : 1;
     delete this.group;
-    if (options.withoutTransform) {
+    if (withoutTransform) {
       resetObjectTransform(this);
     }
-    if (options.withoutShadow) {
+    if (withoutShadow) {
       this.shadow = null;
     }
-    if (options.viewportTransform) {
+    if (viewportTransform) {
       sendObjectToPlane(this, this.getViewportTransform());
     }
 
@@ -1389,9 +1398,13 @@ export class FabricObject<
         : this.getObjectScaling();
       // consider non scaling shadow.
       shadowOffset.x =
-        2 * Math.round(abs(shadow.offsetX) + shadowBlur) * abs(scaling.x);
+        2 *
+        Math.round(Math.abs(shadow.offsetX) + shadowBlur) *
+        Math.abs(scaling.x);
       shadowOffset.y =
-        2 * Math.round(abs(shadow.offsetY) + shadowBlur) * abs(scaling.y);
+        2 *
+        Math.round(Math.abs(shadow.offsetY) + shadowBlur) *
+        Math.abs(scaling.y);
     }
     const width = boundingRect.width + shadowOffset.x,
       height = boundingRect.height + shadowOffset.y;
@@ -1404,7 +1417,7 @@ export class FabricObject<
       renderOnAddRemove: false,
       skipOffscreen: false,
     });
-    if (options.format === 'jpeg') {
+    if (format === 'jpeg') {
       canvas.backgroundColor = '#fff';
     }
     this.setPositionByOrigin(
@@ -1418,7 +1431,11 @@ export class FabricObject<
     canvas._objects = [this];
     this.set('canvas', canvas);
     this.setCoords();
-    const canvasEl = canvas.toCanvasElement(multiplier || 1, options);
+    const canvasEl = canvas.toCanvasElement(
+      (multiplier || 1) * retinaScaling,
+      options,
+      canvasElement
+    );
     this.set('canvas', originalCanvas);
     this.shadow = originalShadow;
     if (originalGroup) {
@@ -1450,7 +1467,7 @@ export class FabricObject<
    * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2
    * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
    */
-  toDataURL(options: any = {}) {
+  toDataURL(options: ObjectToDataUrlOptions = {}) {
     return toDataURL(
       this.toCanvasElement(options),
       options.format || 'png',

src/shapes/Text/Text.ts

@@ -1161,7 +1161,8 @@ export class FabricText<
 
     ctx.save();
     if (currentDirection !== this.direction) {
-      ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl');
+      // optional check to safeguard when exporting to canvas element in node
+      ctx.canvas.setAttribute?.('dir', isLtr ? 'ltr' : 'rtl');
       ctx.direction = isLtr ? 'ltr' : 'rtl';
       ctx.textAlign = isLtr ? LEFT : RIGHT;
     }

src/typedefs.ts

@@ -99,21 +99,50 @@ export type TRectBounds = [min: XY, max: XY];
 
 export type TToCanvasElementOptions<
   T extends BaseFabricObject = BaseFabricObject
-> = {
-  left?: number;
-  top?: number;
-  width?: number;
-  height?: number;
-  filter?: (object: T) => boolean;
+> = TBBox & {
+  filter: (object: T) => boolean;
 };
 
+type ToDataUrlExtraOptions = { quality: number };
+
+type ToCanvasElementExtraOptions = {
+  multiplier: number;
+  enableRetinaScaling: boolean;
+  format: ImageFormat;
+};
+
+type ObjectToCanvasElementExtraOptions = ToCanvasElementExtraOptions & {
+  /**
+   * Remove current object shadow.
+   */
+  withoutShadow: boolean;
+  /**
+   * Remove current object transform ( no scale , no angle, no flip, no skew )
+   */
+  withoutTransform: boolean;
+  /**
+   * Account for canvas viewport transform
+   */
+  viewportTransform: boolean;
+  /**
+   * The element being to used to draw the object onto.
+   */
+  canvasElement: HTMLCanvasElement;
+};
+
+export type ObjectToCanvasElementOptions = Partial<
+  TBBox & ObjectToCanvasElementExtraOptions
+>;
+
+export type ObjectToDataUrlOptions = ObjectToCanvasElementOptions &
+  Partial<ToDataUrlExtraOptions>;
+
 export type TDataUrlOptions<T extends BaseFabricObject = BaseFabricObject> =
-  TToCanvasElementOptions<T> & {
-    multiplier: number;
-    format?: ImageFormat;
-    quality?: number;
-    enableRetinaScaling?: boolean;
-  };
+  Partial<
+    TToCanvasElementOptions<T> &
+      ToCanvasElementExtraOptions &
+      ToDataUrlExtraOptions
+  >;
 
 export type Abortable = {
   /**