Simple assistant for canvas related processing.
Library comes in two version. The first one is bundled with UMD and is available as normal and minified JS file. Second option is ESM which comes with typings so it is also supporting Typescirpt
Use any CDN service that provides access to npm repositories
npm install bpd-canvas
Note: When using an UMD version then all classes arr available in bpdCanvas object attached to your global/window
To create an assistant invoke CanvasAssistant with options:
const assistance = new CanvasAssistant(options)
where options is a AssistantOptions:
-
canvas
- !required - Canvas element. If not passed initializer will throw an exception. -
size
- CanvasObjectSize - optional - sets size of the canvas -
alpha
- boolean - optional - value of global alpha -
desynchronized
- boolean - optional - context option -
useGlobalSettings
- boolean - optional - context option -
settings
- IObjectProperties - optional - global settings for canvas elements
Available methods:
-
setGlobalObjectProperties
-(properties: IObjectProperties)
- sets global components settings -
getGlobalObjectProperties
- return reference to current global settings -
setGlobalAlpha
-(value: number)
- sets global alpha value to context -
setImageSmoothing
-(enabled: boolean, quality?: ImageSmoothingQuality)
- set image smoothing and image smoothing quality -
getImageData
- invokes the same method from context -
putImageData
-(imageData: ImageData, position: CanvasPoint, cutCoords?: CanvasObjectCoordinates)
- invokes original method from context -
createImageData
-(width/data: number/ImageData, height?: number)
- invokes createImageData from context with data (ImageData) or creates blank image data with width and height -
save
- calls contextsave
-
restore
- calls contextrestore
-
setCanvasSize
-(size: CanvasObjectSize)
- sets canvas size -
getCanvasSize
- gets current canvas size -
getContext
- gets canvas context -
clear
-(coords?)
- clears canvas area. If no coordinates is provided, whole canvas gets cleared -
createPattern
-(options: CanvasPatternDefinition)
- creates a pattern -
createLinearGradient
-(options?: CanvasObjectCoordinates)
- creates linear gradient object asCanvasLinearGradientColor
All objects implement method draw()
that is used to draw it on the canvas.
Each drawable exposes (aside of draw
) some methods used to manage how they will after draw:
-
set
-(drawbleSetup)
- method is common for all drawables but argument differs depending on the drawable type -
setSettings
-(settings: IObjectProperties)
- set style settings to drawable -
stroke
-(flag?)
- sets whether component shall draw stroke. Stroke gets disabled only when flag is false -
fill
-(flag?)
- sets whether components shall be filled. Fill gets disabled when flag is set to false -
getKey
- returns id of the component
Creates instance of rectangle drawable. Draws a rectangular shape based on coordinates Setup object: CanvasObjectCoordinates
Flag
isFill
is enabled by default
-
setPosition
-(point: CanvasPoint)
- sets rectangle position -
setSize
-(size: CanvasObjectSize)
- sets rectangle size
Creates instance of Image drawable that draws an image on the canvas Setup object: CanvasImageSetup
Creates instance of text that will be drawn on on canvas Setup object: TextSetup
-
setFont
-(font: IStringable)
- sets font for displayed text. Use Font class to pass font settings.
Draws path on canvas. Path always consists of path elements. Path elements are described in a separate section. Setup object: CanvasPoint
-
from
-(point)
- sets initial position of path -
add
-(...elements: IPathElement[])
- list of path elements -
get
-(index)
- retrives path element from specific index in path children -
delete
-(index)
- deletes path child from specific index -
insertAt
-(index, ...elements)
- adds elements at specific index in the children list -
setAt
-(index, element)
- replaces child at specific index in the children list -
close
-(flag?)
- sets whether path shall be closed
Path elements are used to build a Path.
All elements must implement method build
which is used by component CanvasPath to create an element.
All elements share some methods:
-
getKey
- retrvies an id of the path element -
set
-(data)
- Sets setup data of the element. Type differs depending on element type
Line is an path element that creates next lines.
Setup object: CanvasPoint[]
const line = new Line([{x: 1, y:1}, {x: 10, y: 10}])
const line2 = new Line().set([{x: 1, y:1}, {x: 10, y: 10}])
// with LineData
const data = new LineData({x: 1, y:1})
data.to({x: 10, y: 10}).to({x: 30, y:30}, {x: 50: y: 75});
const line3 = new Line(data.get());
Creates a curved line. Requires ending point, one control point (corner) and radius value.
Setup object: CurveOptions
const curve = new Curve({
end: {x: 10, y: 10},
corner: {x: 20, y:20},
radius: 10
})
// with CurveData
const data = new CurveData().to({x: 10, y: 10}).corner({x: 20, y: 20}).withRadius(10);
const curve2 = new Curve(data.get())
Creates an arc. It requires starting angle, ending angle and radius.
Setup object: ArcOptions
// Creates a circle
const arc = new Arc({
startAngle: 0,
endAngle: Math.PI * 2,
radius: 10
})
// with ArcData
const data = new ArcData().setStartAngle(0).setEndAngle(Math.PI * 2).setRadius(10);
const arc2 = new Arc(data.get());
Creates bezier curve. Requires two control points and ending point
Setup object: BezierCurveOptions
const bzCurve = new BezierCurve({
controlPoint: {x: 10, y: 20},
controlPoint2: {x:30, y: 50},
end: {x: 40, y: 40}
})
// with BezierCurveData
const data = new BezierCurveData().to({x: 40, y:40}).by({x: 10, y: 20}, {x: 30, y: 40});
const bzCurve2 = new BezierCurve(data.get());
Creates quadratic curve. Requires a control point and ending point.
Setup object: QuadraticCurveOptions
const qCurve = new QuadraticCurve({
controlPoint: {x: 10, y: 20},
end: {x: 40, y: 40}
})
// with BezierCurveData
const data = new QuadraticCurveData().to({x: 40, y:40}).by({x: 10, y: 20});
const qCurve2 = new QuadraticCurve(data.get());
Creates an ellipse. It requires some elements properties:
- radiusX
- radiusY
- rotation (in radians)
- startAngle
- endAngle
Setup object: EllipseOptions
const ellipse = new Ellipse({
radiusX: 20,
radiusY: 20,
rotation: Math.PI / 4,
startAngle: 0,
endAngle: Math.PI * 2
})
// with EllipseData
const data = new EllipseData().setRadius(20).setAngles(0, Math.PI *2).setRotation(0);
// Note: Call setRadius(x, y) when you want to set different radius for each axis
const ellipse2 = new Ellipse(data.get());
Creates instance of object styles that allows to build linear gradient
-
addColor
-(offset: number, color: IStringable)
- adds color definition at specific offset -
removeColor
-(offset)
- removes color definition from specific offset -
clearColors
- clears color map -
setPosition
-(position)
-
setSize
-(size)
Creates instance of style object building a HSL color
-
set
-(definition: HslColorDefinition)
- sets color definiton -
setHue
-(value)
- hue value 0...360 -
setSaturation
-(value)
- saturation value 0...100 -
setLightness
-(value)
- lightness value 0...100 -
setAlpha
-(value)
- lightness value 0...100/0...1
Creates instance of style object building a RGB color
-
set
-(color: RgbColorDefinition)
-
setRed
-(value)
- red value 0...255 -
setGreen
-(value)
- green value 0...255 -
setBlue
-(value)
- blue value 0...255 -
setAlpha
-(value)
- alpha value 0...100 -
fromHex
-(value: string)
- parses hex representation of color
Creates instance of object style that accepts all kind of colors in string format
-
set
-(value: string)
-
width
- number -
height
- number
-
fillStyle
? - IObjectStyle; -
strokeWidth
? - number; -
isFill
? - boolean - internal flag to set whether -
isStroke
? - boolean; -
font
? - IStringable; -
mitterLimit
? - number; -
lineCap
? - LineCap; -
lineJoin
? - LineJoin; -
lineDashOffset
? - number; -
lineDash
? - number[]; -
textAlign
? - TextAlign; -
textBaseline
? - TextBaseline; -
shadowColor
? - IObjectStyle; -
shadowOffsetX
? - number; -
shadowOffsetY
? - number; -
shadowBlur
?: number;
-
toStyle
() - string | CanvasGradient | CanvasPattern
-
x
- number -
y
- number
-
source
?: CanvasImageSource -
repeat
?: PatternRepetition
"repeat" | 'repeat-x' | 'repeat-y' | 'no-repeat'
-
x
: number -
y
: number -
width
: number -
height
: number
-
hue
?: number -
saturation
?: number -
lightness
?: number -
alpha
?: number
-
red
?: number; -
green
?: number; -
blue
?: number; -
alpha
?: number;
-
source
?: CanvasImageSource -
position
?: CanvasPoint -
imageSlice
?: CanvasObjectCoordinates -
desitnationCoords
?: CanvasObjectCoordinates
-
text
?: string - text to be displayed -
position
?: CanvasPoint - text position
-
radius
?: number -
corner
?: CanvasPoint -
end
?: CanvasPoint
-
controlPoint
?: CanvasPoint; -
controlPoint2
?: CanvasPoint; -
end
?: CanvasPoint;
-
controlPoint
?: CanvasPoint; -
end
?: CanvasPoint;
-
rotation
?: number; -
radiusX
?: number; -
radiusY
?: number; -
startAngle
?: number; -
endAngle
?: number;
- startAngle: number;
- endAngle: number;
- radius: number;