Shape #

Shape is the source of display elements like Arc, Rect...

Any method or something that exists in Shape also exists in its children

Requrie Option #

Optional Option #

Complex options #

fillPattern #

This option allows to fill with complex things like images, canvas.

See more at: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern

interface FillPattern extends TransformOptions {
  image: CanvasImageSource | string
  repeat?: "repeat" | "repeat-x" | "repeat-y" | "no-repeat"
}

fillLinearGradient #

This option of the Canvas 2D API creates a gradient along the line connecting two given coordinates.

See more at: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

interface FillModelLinearGradient {
  start: { x: number; y: number }
  end: { x: number; y: number }
  colorStops: [number, string][]
}

fillRadialGradient #

This option of the Canvas 2D API creates a radial gradient using the size and coordinates of two circles.

See more at: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient

interface FillModelRadialGradient {
  start: { x: number; y: number }
  startRadius: number
  end: { x: number; y: number }
  endRadius: number
  colorStops: [number, string][]
}

shadow #

This option allows shading an image

interface Shadow {
  x?: number
  y?: number
  color: string
  blur: number
}

Get #

$ (as attrs) #

A Proxy that contains all the settings allowing to get/set the value of props and react automatically

shape.$.x = 100

console.log(shape.$.x) // 100

clientRect #

Returns a Rect object describing the internal size and location

shape.clientRect // { x: 0, y: 0, width: 100, height: 100 }

bounding (as getBoundingClientRect()) #

Returns a Rect object describing the internal size and generate

shape.bounding // { x: 10, y: 10, width: 100, height: 100 }

Protected Methods #

These functions are only available when you customize or inherit Shape

getFill(ctx) #

This function will return a FillStyle that can be filled based on the option set to Shape

getFill(ctx: Canvas2D): FillStyle | void

fillScene(ctx: Canvas2D, path?: Path2D) #

Fill Shape optionally and if path exists it will fill as specified by path

See more: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill#specifying_a_path_and_a_fillrule

fillScene(ctx: Canvas2D, path?: Path2D): void

getStroke(ctx: Canvas2D) #

Returns the possible value of stroke based on the option of Shape

strokeScene(ctx: Canvas2D) #

Draw border

strokeScene(ctx: Canvas2D): void

fillStrokeScene(ctx: Canvas2D): void #

Do fillScene, strokeScene and optionally shader. It depends on setting shadowForStrokeEnabled, fillAfterStrokeEnabled to decide the order in which to do these 3 things

fillStrokeScene(ctx: Canvas2D): void

getSize() #

Returns the size of the shape

Methtods #

getBoundingClientRect() #

This function returns the size and position of the expression of Stage it's the same as Element.getBoundingClientRect

getBoundingClientRect(): {
  width: number
  height: number
  x: number
  y: number
}

draw() #

Make Shape draw once

isPressedPoint(x, y) #

Check if the point with coordinates {x,y} is in Shape or not

isPressedPoint(x: number, y: number): boolean

addTo(layer) #

Where to add Layer

addTo(stage: Layer): void

it is equivalent to

layer.add(layer)

destroy() #

Destroy Shape

destroy(): void