InkingCanvas class
Represents the base class for all canvases. InkingCanvas provides resizing, coordinate tramnslation and base drawingprimitives.
Constructors
| Inking |
Creates a new InkingCanvas instance, attached to the provided HTMLElement. |
Properties
| brush | Gets the canvas' brush. |
| canvas | Gets the underlying HTML5 Canvas element. |
| fade |
Configures the time it takes, in milliseconds, for an InkingCanvas to fade out. |
| highlighter |
Configures the opacity of highlighter strokes. |
| laser |
Configures the opacity of the laser stroke shadow. |
| offset | Gets the offset from the canvas' reference point, in pixels. |
| reference |
The canvas' reference point. |
| scale | Gets the canvas' scale. Defaults to 1. |
Methods
| add |
Adds a points to the current stroke. |
| begin |
Begins a stroke in the canvas. |
| cancel |
Cancels the current stroke. |
| clear() | Clears the canvas. |
| end |
Ends the current stroke in the canvas. |
| fade |
Fades the canvas out by decreasing its opacity, and eventually removes it from the DOM. |
| remove |
Removes the canvas from the DOM. |
| render |
Renders the specified stroke onto the canvas. |
| resize(number, number) | Resizes this canvas. |
| set |
Sets the current brush for the canvas. |
Constructor Details
InkingCanvas(HTMLElement)
Creates a new InkingCanvas instance, attached to the provided HTMLElement.
new InkingCanvas(_parentElement?: HTMLElement)Parameters
- _parentElement
-
HTMLElement
The HTML element this canvas is attached to. InkingCanvas
dynamically creates an HTML5 Canvas element and adds it as a child to parentElement.
Property Details
brush
canvas
Gets the underlying HTML5 Canvas element.
HTMLCanvasElement canvasProperty Value
HTMLCanvasElement
fadeOutDuration
Configures the time it takes, in milliseconds, for an InkingCanvas to fade out.
static fadeOutDuration: numberProperty Value
number
highlighterOpacity
Configures the opacity of highlighter strokes.
static highlighterOpacity: numberProperty Value
number
laserShadowOpacity
Configures the opacity of the laser stroke shadow.
static laserShadowOpacity: numberProperty Value
number
offset
Gets the offset from the canvas' reference point, in pixels.
Readonly<IPoint> offsetProperty Value
Readonly<IPoint>
referencePoint
The canvas' reference point.
referencePoint: CanvasReferencePointProperty Value
scale
Gets the canvas' scale. Defaults to 1.
number scaleProperty Value
number
Method Details
addPoint(IPointerPoint)
Adds a points to the current stroke.
function addPoint(p: IPointerPoint)Parameters
The point to add to the current stroke.
beginStroke(IPointerPoint)
Begins a stroke in the canvas.
function beginStroke(p: IPointerPoint)Parameters
The starting point of the stroke.
cancelStroke()
Cancels the current stroke.
function cancelStroke()clear()
Clears the canvas.
function clear()
endStroke(IPointerPoint)
Ends the current stroke in the canvas.
function endStroke(p?: IPointerPoint)Parameters
Optional. The end point of the stroke. If not specified, the end point is the last one added.
fadeOut()
Fades the canvas out by decreasing its opacity, and eventually removes it from the DOM.
function fadeOut()
removeFromDOM()
Removes the canvas from the DOM.
function removeFromDOM()
renderStroke(IStroke)
Renders the specified stroke onto the canvas.
function renderStroke(stroke: IStroke)Parameters
- stroke
- IStroke
The stroke to render.
resize(number, number)
Resizes this canvas.
function resize(width: number, height: number)Parameters
- width
-
number
The new width of the canvas, in pixels.
- height
-
number
The new height of the canvas, in pixels.
setBrush(IBrush)
Sets the current brush for the canvas.
function setBrush(value: IBrush)Parameters
- value
- IBrush
The brush.