Interface SerializedCircleProps

Hierarchy

Properties

angle backgroundColor clipPath? endAngle fill fillRule flipX flipY globalCompositeOperation height left opacity originX originY paintFirst radius scaleX scaleY shadow skewX skewY startAngle stroke strokeDashArray strokeDashOffset strokeLineCap strokeLineJoin strokeMiterLimit strokeUniform strokeWidth top visible width

Properties

angle

angle: TDegree

Angle of rotation of an object (in degrees)

Default

0

backgroundColor

backgroundColor: string

Background color of an object. takes css colors https://www.w3.org/TR/css-color-3/

Default

Optional clipPath

clipPath?: Partial<SerializedObjectProps> & ClipPathProps

a fabricObject that, without stroke define a clipping area with their shape. filled in black the clipPath object gets used when the object has rendered, and the context is placed in the center of the object cacheCanvas. If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center'

endAngle

endAngle: number

End angle of the circle probably will change to degrees in next major version

Default

360

fill

fill: null | string | Record<string, any> | Partial<Gradient<"linear", "linear">> & {
    colorStops: ColorStop[];
    coords: LinearGradientCoords<number>;
    gradientTransform: undefined | number[];
    gradientUnits: GradientUnits;
    offsetX: number;
    offsetY: number;
    type: "linear";
} | Partial<Gradient<"radial", "radial">> & {
    colorStops: ColorStop[];
    coords: RadialGradientCoords<number>;
    gradientTransform: undefined | number[];
    gradientUnits: GradientUnits;
    offsetX: number;
    offsetY: number;
    type: "radial";
}

Color of object's fill takes css colors https://www.w3.org/TR/css-color-3/

Default

rgb(0,0,0)

fillRule

fillRule: CanvasFillRule

Fill rule used to fill an object accepted values are nonzero, evenodd Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use globalCompositeOperation instead)

Default

nonzero

flipX

flipX: boolean

When true, an object is rendered as flipped horizontally

Default

false

flipY

flipY: boolean

When true, an object is rendered as flipped vertically

Default

false

globalCompositeOperation

globalCompositeOperation: GlobalCompositeOperation

Composite rule used for canvas globalCompositeOperation

Default

height

height: number

Object height

Default

left

left: number

Left position of an object. Note that by default it's relative to object left. You can change this by setting originX={left/center/right}

Default

0

opacity

opacity: number

Opacity of an object

Default

1

originX

originX: TOriginX

Horizontal origin of transformation of an object (one of "left", "right", "center") See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups

Default

'left'

originY

originY: TOriginY

Vertical origin of transformation of an object (one of "top", "bottom", "center") See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups

Default

'top'

paintFirst

paintFirst: "fill" | "stroke"

Determines if the fill or the stroke is drawn first (one of "fill" or "stroke")

Default

radius

radius: number

Radius of this circle

Default

0

scaleX

scaleX: number

Object scale factor (horizontal)

Default

1

scaleY

scaleY: number

Object scale factor (vertical)

Default

1

shadow

shadow: null | Partial<SerializedShadowOptions>

Shadow object representing shadow of this shape

Default

null

skewX

skewX: number

Angle of skew on x axes of an object (in degrees)

Default

0

skewY

skewY: number

Angle of skew on y axes of an object (in degrees)

Default

0

startAngle

startAngle: number

degrees of start of the circle. probably will change to degrees in next major version

Default

0

stroke

stroke: null | string | Record<string, any> | Partial<Gradient<"linear", "linear">> & {
    colorStops: ColorStop[];
    coords: LinearGradientCoords<number>;
    gradientTransform: undefined | number[];
    gradientUnits: GradientUnits;
    offsetX: number;
    offsetY: number;
    type: "linear";
} | Partial<Gradient<"radial", "radial">> & {
    colorStops: ColorStop[];
    coords: RadialGradientCoords<number>;
    gradientTransform: undefined | number[];
    gradientUnits: GradientUnits;
    offsetX: number;
    offsetY: number;
    type: "radial";
}

When defined, an object is rendered via stroke and this property specifies its color takes css colors https://www.w3.org/TR/css-color-3/

Default

null

strokeDashArray

strokeDashArray: null | number[]

Array specifying dash pattern of an object's stroke (stroke must be defined)

Default

null;

strokeDashOffset

strokeDashOffset: number

Line offset of an object's stroke

Default

0

strokeLineCap

strokeLineCap: CanvasLineCap

Line endings style of an object's stroke (one of "butt", "round", "square")

Default

butt

strokeLineJoin

strokeLineJoin: CanvasLineJoin

Corner style of an object's stroke (one of "bevel", "round", "miter")

Default

strokeMiterLimit

strokeMiterLimit: number

Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke

Default

4

strokeUniform

strokeUniform: boolean

When false, the stoke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width. this Property does not work on Text classes or drawing call that uses strokeText,fillText methods default to false

Since

2.6.0

Default

false

Default

false

strokeWidth

strokeWidth: number

Width of a stroke used to render this object

Default

1

top

top: number

Top position of an object. Note that by default it's relative to object top. You can change this by setting originY={top/center/bottom}

Default

0

visible

visible: boolean

When set to false, an object is not rendered on canvas

Default

width

width: number

Object width

Default

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc