Fabric.js

https://fabricjs.com
Admin
Fabric.js is a powerful JavaScript HTML5 canvas library that provides an interactive object model...
Tokens:409,540
Snippets:4,565
Trust Score:9.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Set up Fabric canvas with crop control examples

Source: https://fabricjs.com/demos/cropping-controls

Initializes a Fabric canvas and loads the cropping/resizing control factories. Demonstrates the setup shown in the editor, including shared scale and crop properties.

```javascript
const canvas = new fabric.Canvas(canvasEl, {
  backgroundColor: '#f5f5f5',
});
```

```javascript
// Both factories come from `fabric/extensions`:
//
// import {
//   createImageCroppingControls,
//   createImageResizeControlsWithScaleToCover,
// } from 'fabric/extensions';
//
// In this editor they are pre-imported for you as `extensions`.
const { createImageCroppingControls, createImageResizeControlsWithScaleToCover } =
  extensions;
```

```javascript
const shared = {
  scaleX: 0.45,
  scaleY: 0.45,
  cropX: 80,
  cropY: 80,
  width: 400,
  height: 400,
  cornerColor: '#ffffff',
  borderScaleFactor: 2,
  transparentCorners: false,
  padding: 0,
};
```

```javascript
const label = (text, left, top, fill) =>
  new fabric.FabricText(text, {
    left,
    top,
    fontSize: 14,
    fontFamily: 'sans-serif',
    fill,
    originX: 'center',
```

--------------------------------

### toString() Examples

Source: https://fabricjs.com/api/classes/staticcanvas

Examples for the toString() method showing how to get SVG representations of the canvas with various options.

```javascript
var svg = canvas.toSVG();
```

```javascript
var svg = canvas.toSVG({suppressPreamble: true});
```

```javascript
var svg = canvas.toSVG({
  viewBox: {
    x: 100,
    y: 100,
    width: 200,
    height: 200
  }
});
```

```javascript
var svg = canvas.toSVG(null, function(svg) {
  return svg.replace('stroke-dasharray: ; stroke-linecap: ;', '');
});
```

--------------------------------

### Complete Hello world example with fabric global

Source: https://fabricjs.com/docs/getting-started/helloworld

Complete runnable example that creates a canvas, adds centered text, and downloads the result as a PNG. Uses the global fabric object.

```javascript
const { StaticCanvas, FabricText } = fabric;
const canvas = new StaticCanvas();
const helloWorld = new FabricText('Hello world!');
canvas.add(helloWorld);
canvas.centerObject(helloWorld);
const imageSrc = canvas.toDataURL();
// some download code down here
const a = document.createElement('a');
a.href = imageSrc;
a.download = 'image.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

```

--------------------------------

### Polyline Constructor Example

Source: https://fabricjs.com/api/classes/polygon

Example of creating a Polyline instance with an array of points.

```javascript
var poly = new Polyline([
    { x: 10, y: 10 },
    { x: 50, y: 50 },
    { x: 100, y: 100 }
]);
```

--------------------------------

### toDataURL Examples

Source: https://fabricjs.com/api/classes/canvas

Examples of using the toDataURL method with different options.

```javascript
var dataURL = canvas.toDataURL({
  format: 'jpeg',
  quality: 0.8
});
```

```javascript
var dataURL = canvas.toDataURL({
  format: 'png',
  multiplier: 2
});
```

```javascript
var myObject;
var dataURL = canvas.toDataURL({
  filter: (object) => object.isContainedWithinObject(myObject) || object.intersectsWithObject(myObject)
});
```

--------------------------------

### Example

Source: https://fabricjs.com/api/fabric/namespaces/filters/classes/blendimage

Example of creating a BlendImage filter and applying it to an object.

```APIDOC
const filter = new filters.BlendColor({
  color: '#000',
  mode: 'multiply'
});

const filter = new BlendImage({
  image: fabricImageObject,
  mode: 'multiply'
});
object.filters.push(filter);
object.applyFilters();
canvas.renderAll();
```

--------------------------------

### parsePath example

Source: https://fabricjs.com/api/fabric/namespaces/util/functions/parsepath

Shows the expected return value of parsePath for a path string with two quadratic curves. The result is an array of command arrays, each starting with the command letter followed by numeric parameters.

```javascript
parsePath('M 3 4 Q 3 5 2 1 4 0 Q 9 12 2 1 4 0') === [
  ['M', 3, 4],
  ['Q', 3, 5, 2, 1, 4, 0],
  ['Q', 9, 12, 2, 1, 4, 0],
];
```

--------------------------------

### toJSON Examples

Source: https://fabricjs.com/api/classes/canvas

Examples of serializing a canvas to JSON.

```javascript
const json = canvas.toJSON();
```

```javascript
const json = JSON.stringify(canvas);
```

--------------------------------

### Creating a BlendColor filter instance

Source: https://fabricjs.com/api/fabric/namespaces/filters/classes/blendcolor

Example showing how to create a BlendColor filter with a specific color and multiply blend mode. Use this as a basic setup for applying color blending to an object.

```javascript
const filter = new BlendColor({
  color: '#000',
  mode: 'multiply'
});
```

--------------------------------

### onCompositionStart()

Source: https://fabricjs.com/api/classes/itext

Handles the composition start event for IText objects.

```APIDOC
## onCompositionStart()

### Description
Composition start event handler.

### Method
onCompositionStart

### Signature
`onCompositionStart(): void`

### Parameters
None

### Returns
`void`

### Inherited From
`ITextClickBehavior.onCompositionStart`
```

--------------------------------

### get()

Source: https://fabricjs.com/api/classes/canvas

Basic getter.

```APIDOC
## get()

### Description
Basic getter.

### Method
get

### Signature
`get(property: string): any`

### Parameters
- **property** (`string`) - Required - Property name.

### Returns
`any` - value of a property

### Inherited From
`SelectableCanvas.get`
```

--------------------------------

### renderCursorAt(selectionStart)

Source: https://fabricjs.com/api/classes/itext

Renders the cursor at a specific selection start position.

```APIDOC
## renderCursorAt(selectionStart)

### Description
Renders cursor on context top, outside the animation cycle, on request. Used for the drag/drop effect. If contextTop is not available, do nothing.

### Method
renderCursorAt

### Parameters
- **selectionStart** (`number`) - Required - The selection start position.

### Returns
`void`
```

--------------------------------

### getDownCursorOffset(e, isRight)

Source: https://fabricjs.com/api/classes/itext

Gets the start offset of a selection when moving the cursor down.

```APIDOC
## getDownCursorOffset(e, isRight)

### Description
Gets the start offset of a selection when moving the cursor down.

### Method
Function

### Signature
`getDownCursorOffset(e: KeyboardEvent, isRight: boolean): number`

### Parameters
- **e** (KeyboardEvent) - Required - The keyboard event object.
- **isRight** (boolean) - Required - Indicates whether the cursor is moving right.

### Returns
`number` - The start offset of the selection.

### Inherited From
`ITextClickBehavior.getDownCursorOffset`
```

--------------------------------

### getSelectionStyles(startIndex, endIndex?, complete?)

Source: https://fabricjs.com/api/classes/fabrictext

Gets style of a current selection/cursor (at the start position).

```APIDOC
## getSelectionStyles(startIndex, endIndex?, complete?)

### Description
Gets style of a current selection/cursor (at the start position).

### Method
N/A (SDK method)

### Endpoint
N/A (SDK method)

### Parameters
- `startIndex` (`number`) - Start index to get styles at.
- `endIndex?` (`number`) - End index to get styles at, if not specified startIndex + 1.
- `complete?` (`boolean`) - get full style or not.

### Returns
`Partial<CompleteTextStyleDeclaration>[]` - styles an array with one, zero or more Style objects

### Inherited From
`StyledText.getSelectionStyles`

### Source
src/shapes/Text/StyledText.ts:207
```

--------------------------------

### _setupFrameBuffer()

Source: https://fabricjs.com/api/fabric/namespaces/filters/classes/noise

Sets up the framebuffer for the WebGL pipeline.

```APIDOC
## _setupFrameBuffer(options)

### Description
Sets up the framebuffer for the WebGL pipeline.

### Parameters
- **options** (TWebGLPipelineState) - The WebGL pipeline state.

### Returns
`void`

### Inherited from
`BaseFilter._setupFrameBuffer`
```

--------------------------------

### _setupFrameBuffer(options)

Source: https://fabricjs.com/api/fabric/namespaces/filters/classes/basefilter

Sets up the frame buffer for WebGL rendering.

```APIDOC
## _setupFrameBuffer(options)

### Description
Sets up the frame buffer for WebGL rendering.

### Method
CALL

### Endpoint
`_setupFrameBuffer`

### Parameters
- `options` (TWebGLPipelineState) - Required - The WebGL pipeline state.

### Returns
- `void`

```

--------------------------------

### setupGLContext(width, height)

Source: https://fabricjs.com/api/classes/webglfilterbackend

Initializes a WebGL context for filtering operations.

```APIDOC
## setupGLContext(width, height)

### Description
Setup a WebGL context suitable for filtering, and bind any needed event handlers.

### Method
Function call

### Parameters
- **width** (`number`) - Required - Width of the context.
- **height** (`number`) - Required - Height of the context.

### Returns
`void`

```

--------------------------------

### Initialize canvas and add shapes

Source: https://fabricjs.com/demos/managing-selection

Sets up the canvas instance, adds initial shapes, disables transparent corners for selection handles, and wires the 'addmore' button to the add function.

```javascript
const $ = (id) => document.getElementById(id);

const canvas = new fabric.Canvas(canvasEl);
add();
fabric.FabricObject.ownDefaults.transparentCorners = false;
$('addmore').onclick = add;
```

--------------------------------

### Realtime lanczos filter demo setup

Source: https://fabricjs.com/demos/lanczos-webgl

Initializes two 2D contexts with image smoothing disabled, creates a Fabric canvas, defines a lanczos resize filter with 3 lobes, and loads a large image with scaling and filter application. The scaling event handler is incomplete in the source.

```javascript
var canvas1 = document.getElementById('c');
var canvas2 = document.getElementById('b');
var ctx = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx2.imageSmoothingEnabled = false;
```

```javascript
const canvas = new fabric.Canvas(canvasEl);
// create a rectangle object
```

```javascript
var lanczosFilter = new fabric.filters.Resize({
scaleX: 1,
scaleY: 1,
resizeType: 'lanczos',
lanczosLobes: 3,
});
```

```javascript
var oImg;
var p = {
x: 0,
y: 0,
};
```

```javascript
fabric.FabricImage.fromURL('/assets/dragon.jpg').then((img) => {
var r = canvas.getRetinaScaling();
oImg = img;
oImg.set({ left: 20, top: 20 })
oImg.scale(0.2);
lanczosFilter.scaleX = lanczosFilter.scaleY = oImg.scaleX * r;
oImg.lockScalingFlip = true;
oImg.minScaleLimit = 0.025;
oImg.filters = [lanczosFilter];
oImg.hoverCursor = 'crossHair';
oImg.on('scaling', function(opt) {
var filters = [];
var sX = Math.abs(oImg.scaleX) * r, sY = Math.abs(oImg.scaleY) * r;
```

--------------------------------

### setSuperscript(start: number, end: number): void

Source: https://fabricjs.com/api/classes/itext

Converts the selected text to superscript.

```APIDOC
## setSuperscript(start: number, end: number): void

### Description
Turns the character into a 'superior figure' (i.e. 'superscript').

### Method
setSuperscript

### Parameters
- **start** (number) - Required - selection start
- **end** (number) - Required - selection end

### Returns
void

### Inherited From
ITextClickBehavior.setSuperscript
```

--------------------------------

### Install Fabric.js from npm

Source: https://fabricjs.com/docs/getting-started/installing

Run this command to install Fabric.js as a dependency in your project.

```bash
npm i --save fabric
```

--------------------------------

### Installing Gradient Updater

Source: https://fabricjs.com/docs/upgrading/upgrading-to-fabric-70

Use this utility to maintain compatibility with older data that relied on the removed opacity property in Gradient ColorStops.

```javascript
import { installGradientUpdater } from 'fabric/extensions';


installGradientUpdater();
```

--------------------------------

### enterEditingImpl()

Source: https://fabricjs.com/api/classes/itext

Runs the actual logic that enters from editing state.

```APIDOC
## enterEditingImpl()

### Description
Runs the actual logic that enters from editing state, see enterEditing.

### Method
Function call

### Endpoint
`enterEditingImpl()`

### Returns
`void`

### Inherited From
`ITextClickBehavior.enterEditingImpl`
```

--------------------------------

### setXY Example

Source: https://fabricjs.com/api/classes/polygon

Example of setting an object's position using the setXY method with a Point and origin values.

```typescript
setXY(new Point(5, 5), 'left', 'bottom').
```

--------------------------------

### erasing:start

Source: https://fabricjs.com/api/interfaces/canvasevents

Event emitted when an erasing operation starts. The payload is of type never, indicating no additional data.

```APIDOC
## erasing:start

### Description
Event emitted when an erasing operation starts. The payload is of type never, indicating no additional data.
```

--------------------------------

### get type()

Source: https://fabricjs.com/api/classes/basefabricobject

Gets the legacy identifier of the class. Prefer using utils like isType or instanceOf. Will be removed in fabric 7 or 8.

```APIDOC
## get type()

### Description
Gets the legacy identifier of the class. Prefer using utils like isType or instanceOf. Will be removed in fabric 7 or 8.

### Method
get

### Signature
`get type(): string`

### Returns
- `string` - The type identifier.

```

--------------------------------

### new InteractiveFabricObject(options?)

Source: https://fabricjs.com/api/classes/interactivefabricobject

Creates a new InteractiveFabricObject instance with optional options. The constructor initializes the object with the provided properties.

```APIDOC
## new InteractiveFabricObject(options?)

### Description
Creates a new InteractiveFabricObject instance with optional options.

### Constructor
`new InteractiveFabricObject<Props, SProps, EventSpec>(options?: Props): InteractiveFabricObject<Props, SProps, EventSpec>`

### Parameters
- **options** (`Props`) - Optional - Options object

### Returns
`InteractiveFabricObject<Props, SProps, EventSpec>`

### Overrides
`BaseFabricObject.constructor`
```

--------------------------------

### Import createLinearGradientControls

Source: https://fabricjs.com/docs/using-gradients

Import the prepared control set from the fabric/extensions module. Use it to add interactive gradient handles to an object.

```javascript
import { createLinearGradientControls } from 'fabric/extensions';
```

--------------------------------

### new BaseFabricObject<Props, SProps, EventSpec>(options?)

Source: https://fabricjs.com/api/classes/basefabricobject

Creates a new BaseFabricObject instance with optional options.

```APIDOC
## Constructor

### new BaseFabricObject<Props, SProps, EventSpec>(options?)

Creates a new BaseFabricObject instance.

#### Parameters
- **options** (`Props`) - Optional. Options object.

#### Returns
`FabricObject<Props, SProps, EventSpec>`

#### Overrides
`ObjectGeometry<EventSpec>.constructor`
```

--------------------------------

### get()

Source: https://fabricjs.com/api/classes/rect

Basic getter for a property.

```APIDOC
## get(property): any

### Description
Basic getter for a property.

### Method
get

### Signature
`get(property: string): any`

### Parameters
- **property** (`string`) - Required - Property name.

### Returns
`any` - Value of the property.

### Inherited From
`FabricObject.get`
```

--------------------------------

### SVG gradient element examples for fromElement()

Source: https://fabricjs.com/api/classes/gradient

Shows four SVG gradient definitions (linear and radial) that can be parsed by Gradient.fromElement(). The examples illustrate both percentage and numeric offset styles, and include stop colors with optional opacity.

```xml
<linearGradient id="linearGrad1">
   <stop offset="0%" stop-color="white"/>
   <stop offset="100%" stop-color="black"/>
 </linearGradient>


 OR


 <linearGradient id="linearGrad2">
   <stop offset="0" style="stop-color:rgb(255,255,255)"/>
   <stop offset="1" style="stop-color:rgb(0,0,0)"/>
 </linearGradient>


 OR


 <radialGradient id="radialGrad1">
   <stop offset="0%" stop-color="white" stop-opacity="1" />
   <stop offset="50%" stop-color="black" stop-opacity="0.5" />
   <stop offset="100%" stop-color="white" stop-opacity="1" />
 </radialGradient>


 OR


 <radialGradient id="radialGrad2">
   <stop offset="0" stop-color="rgb(255,255,255)" />
   <stop offset="0.5" stop-color="rgb(0,0,0)" />
   <stop offset="1" stop-color="rgb(255,255,255)" />
 </radialGradient>
```

--------------------------------

### initFilterBackend()

Source: https://fabricjs.com/api/functions/initfilterbackend

Verifies if it is possible to initialize webgl or fallback on a canvas2d filtering backend.

```APIDOC
## initFilterBackend()

### Description
Verifies if it is possible to initialize webgl or fallback on a canvas2d filtering backend.

### Method
Function

### Signature
`initFilterBackend(): FilterBackend`

### Returns
- **FilterBackend** - The initialized filtering backend.

### Source
Defined in: src/filters/FilterBackend.ts:14
```

--------------------------------

### get type()

Source: https://fabricjs.com/api/fabric/namespaces/filters/classes/blendimage

Returns the filter type.

```APIDOC
## get type()

### Description
Returns the filter type.

### Method
GET

### Endpoint
`type`

### Returns
`Name`

### Inherited from
`BaseFilter`.`type`

```

--------------------------------

### Constructor

Source: https://fabricjs.com/api/classes/clippathlayout

Creates a new instance of ClipPathLayout.

```APIDOC
new ClipPathLayout()
```

--------------------------------

### complexity()

Source: https://fabricjs.com/api/classes/staticcanvas

Method to get the complexity of the collection.

```APIDOC
## complexity()

### Description
Returns a number representation of a collection complexity.

### Method
complexity()

### Returns
`number` - Complexity

```

--------------------------------

### getFilterBackend(strict?)

Source: https://fabricjs.com/api/functions/getfilterbackend

Get the current fabricJS filter backend or initialize one if not available yet. Pass true to create the backend if it wasn't created yet (default behavior), pass false to get the backend ref without mutating it.

```APIDOC
## getFilterBackend(strict?)

### Description
Get the current fabricJS filter backend or initialize one if not available yet.

### Method
Function

### Signature
`getFilterBackend(strict?: boolean): FilterBackend`

### Parameters
- **strict** (`boolean`, optional, default `true`) - Pass `true` to create the backend if it wasn't created yet (default behavior), pass `false` to get the backend ref without mutating it.

### Returns
`FilterBackend` - The current filter backend instance.

```

--------------------------------

### Create a Polyline with points and options

Source: https://fabricjs.com/api/classes/polyline

Creates a new Polyline instance with an array of points and an options object. The example sets stroke to 'red' and positions the polyline at left: 100, top: 100.

```javascript
var poly = new Polyline([
    { x: 10, y: 10 },
    { x: 50, y: 30 },
    { x: 40, y: 70 },
    { x: 60, y: 50 },
    { x: 100, y: 150 },
    { x: 40, y: 100 }
  ], {
  stroke: 'red',
  left: 100,
  top: 100
});
```

--------------------------------

### renderDragSourceEffect()

Source: https://fabricjs.com/api/classes/textbox

Renders drag start text selection.

```APIDOC
## renderDragSourceEffect()

### Description
Renders drag start text selection.

### Method
renderDragSourceEffect

### Returns
void

### Inherited From
IText.renderDragSourceEffect
```

--------------------------------

### setSuperscript(start, end)

Source: https://fabricjs.com/api/classes/fabrictext

Turns the character into a 'superior figure' (i.e. 'superscript').

```APIDOC
## setSuperscript(start, end)

### Description
Turns the character into a 'superior figure' (i.e. 'superscript').

### Method
setSuperscript

### Signature
`setSuperscript(start: number, end: number): void`

### Parameters
- **start** (`number`) - Required - selection start
- **end** (`number`) - Required - selection end

### Returns
`void`
```

--------------------------------

### enterEditingImpl()

Source: https://fabricjs.com/api/classes/textbox

Internal implementation for entering editing state.

```APIDOC
## enterEditingImpl()

### Description
Runs the actual logic that enters from editing state, see enterEditing.

### Method
Function call

### Signature
`enterEditingImpl(): void`

### Parameters
None

### Returns
`void`

### Inherited From
`IText.enterEditingImpl`
```

--------------------------------

### getSvgFilter(this)

Source: https://fabricjs.com/api/classes/fabricimage

Method to get the SVG filter for shadow.

```APIDOC
## getSvgFilter(this)

### Description
Returns filter for svg shadow.

### Method
`getSvgFilter(this)`

### Parameters
- **this** (`FabricObjectSVGExportMixin` & `FabricObject`<`Partial`<`FabricObjectProps`>, `SerializedObjectProps`, `ObjectEvents`>) - Required - The instance context.

### Returns
`string`

### Inherited From
`FabricObject`.`getSvgFilter`
```

--------------------------------

### getSrc(filtered?)

Source: https://fabricjs.com/api/classes/fabricimage

Method to get the source of an image.

```APIDOC
## getSrc(filtered?)

### Description
Returns source of an image.

### Method
`getSrc(filtered?)`

### Parameters
- **filtered** (`boolean`) - Optional - indicates if the src is needed for svg

### Returns
`string` - Source of an image
```

--------------------------------

### Applying filters to an object and rendering

Source: https://fabricjs.com/api/fabric/namespaces/filters/classes/blendcolor

Example showing how to create a BlendImage filter, push it to an object's filters array, apply filters, and render the canvas.

```javascript
const filter = new BlendImage({
  image: fabricImageObject,
  mode: 'multiply'
});
object.filters.push(filter);
object.applyFilters();
canvas.renderAll();
```

--------------------------------

### getBoundingRect()

Source: https://fabricjs.com/api/classes/fabricimage

Method to get the bounding rectangle of the object.

```APIDOC
## getBoundingRect()

### Description
Returns coordinates of object's bounding rectangle (left, top, width, height). The box is intended as aligned to axis of canvas.

### Method
Function call

### Endpoint
`getBoundingRect()`

### Returns
`TBBox` - Object with left, top, width, height properties.

### Inherited From
`FabricObject.getBoundingRect`
```

--------------------------------

### _drawClipPath(ctx, clipPath, context)

Source: https://fabricjs.com/api/classes/basefabricobject

Prepare clipPath state and cache and draw it on instance's cache.

```APIDOC
## _drawClipPath(ctx, clipPath, context)

### Description
Prepare clipPath state and cache and draw it on instance's cache.

### Signature
`_drawClipPath(ctx: CanvasRenderingContext2D, clipPath: undefined | FabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>, context: DrawContext): void`

### Parameters
- `ctx` (CanvasRenderingContext2D) - The rendering context.
- `clipPath` (undefined | FabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>) - The clip path object.
- `context` (DrawContext) - The draw context.

### Returns
- `void`

```

--------------------------------

### getTotalAngle()

Source: https://fabricjs.com/api/classes/fabricobject

Method to get the total angle of the object.

```APIDOC
## getTotalAngle()

### Description
Returns the object angle relative to canvas counting also the group property.

### Method
Function

### Signature
`getTotalAngle(): TDegree`

### Returns
- **TDegree** - The total angle.

### Inherited From
`InteractiveFabricObject`.`getTotalAngle`
```

--------------------------------

### getScaledWidth()

Source: https://fabricjs.com/api/classes/fabricobject

Method to get the scaled width of a FabricObject.

```APIDOC
## getScaledWidth()

### Description
Returns width of an object's bounding box counting transformations.

### Method
Function

### Signature
`getScaledWidth(): number`

### Returns
- **number** - width value

### Inherited From
`InteractiveFabricObject`.`getScaledWidth`
```

--------------------------------

### new Path(path, options?)

Source: https://fabricjs.com/api/classes/path

Creates a new Path instance with the given path data and optional options. The path data can be a string or a TComplexPathData object.

```APIDOC
## new Path(path, options?)

### Description
Creates a new Path instance. The constructor accepts path data (sequence of coordinates and command tokens) and an optional options object.

### Method
Constructor

### Parameters
- **path** (string | TComplexPathData) - Required - Path data (sequence of coordinates and corresponding "command" tokens)
- **options?** (Partial<Props>) - Optional - Options object, defaults to {}

### Returns
Path<Props, SProps, EventSpec> - thisArg

### Overrides
FabricObject.constructor
```

--------------------------------

### noScaleCache

Source: https://fabricjs.com/api/classes/fabricimage

When true, cache does not get updated during scaling.

```APIDOC
## noScaleCache

### Description
When `true`, cache does not get updated during scaling. The picture will get blocky if scaled too much and will be redrawn with correct details at the end of scaling. This setting is performance and application dependent. Default to true since 1.7.0.

### Type
`boolean`

### Default
`true`

### Defined in
`src/shapes/Object/InteractiveObject.ts:54`

### Implementation of
`ImageProps`.`noScaleCache`

### Inherited from
`FabricObject`.`noScaleCache`
```

--------------------------------

### _getWidthOfCharSpacing()

Source: https://fabricjs.com/api/classes/itext

Method to get the width of character spacing.

```APIDOC
## [METHOD] _getWidthOfCharSpacing()

### Description
Method to get the width of character spacing.

### Method
_getWidthOfCharSpacing

### Parameters
None

### Returns
`number`

### Defined in
`src/shapes/Text/Text.ts:1536`

### Inherited from
`ITextClickBehavior._getWidthOfCharSpacing`
```

--------------------------------

### onDragStart()

Source: https://fabricjs.com/api/classes/ellipse

Callback fired when a drag session starts; override to customize drag behavior.

```APIDOC
## onDragStart()

### Description
Override to customize Drag behavior. Fired once a drag session has started.

### Method
onDragStart

### Signature
`onDragStart(_e: DragEvent): boolean`

### Parameters
- `_e` (DragEvent) - the drag event

### Returns
`boolean` - true to handle the drag event

### Inherited From
`FabricObject.onDragStart`
```
Tokens:
Raw