InkingCanvas class

Package:

@microsoft/live-share-canvas

Represents the base class for all canvases. InkingCanvas provides resizing, coordinate tramnslation and base drawingprimitives.

Constructors

InkingCanvas(HTMLElement)

Creates a new InkingCanvas instance, attached to the provided HTMLElement.

Properties

brush	Gets the canvas' brush.
canvas	Gets the underlying HTML5 Canvas element.
fadeOutDuration	Configures the time it takes, in milliseconds, for an InkingCanvas to fade out.
highlighterOpacity	Configures the opacity of highlighter strokes.
laserShadowOpacity	Configures the opacity of the laser stroke shadow.
offset	Gets the offset from the canvas' reference point, in pixels.
referencePoint	The canvas' reference point.
scale	Gets the canvas' scale. Defaults to 1.

Methods

addPoint(IPointerPoint)	Adds a points to the current stroke.
beginStroke(IPointerPoint)	Begins a stroke in the canvas.
cancelStroke()	Cancels the current stroke.
clear()	Clears the canvas.
endStroke(IPointerPoint)	Ends the current stroke in the canvas.
fadeOut()	Fades the canvas out by decreasing its opacity, and eventually removes it from the DOM.
removeFromDOM()	Removes the canvas from the DOM.
renderStroke(IStroke)	Renders the specified stroke onto the canvas.
resize(number, number)	Resizes this canvas.
setBrush(IBrush)	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

Gets the canvas' brush.

IBrush brush

Property Value

IBrush

canvas

Gets the underlying HTML5 Canvas element.

HTMLCanvasElement canvas

Property Value

HTMLCanvasElement

fadeOutDuration

Configures the time it takes, in milliseconds, for an InkingCanvas to fade out.

static fadeOutDuration: number

Property Value

number

highlighterOpacity

Configures the opacity of highlighter strokes.

static highlighterOpacity: number

Property Value

number

laserShadowOpacity

Configures the opacity of the laser stroke shadow.

static laserShadowOpacity: number

Property Value

number

offset

Gets the offset from the canvas' reference point, in pixels.

Readonly<IPoint> offset

Property Value

Readonly<IPoint>

referencePoint

The canvas' reference point.

referencePoint: CanvasReferencePoint

Property Value

CanvasReferencePoint

scale

Gets the canvas' scale. Defaults to 1.

number scale

Property Value

number

Method Details

addPoint(IPointerPoint)

Adds a points to the current stroke.

function addPoint(p: IPointerPoint)

Parameters

p

IPointerPoint

The point to add to the current stroke.

beginStroke(IPointerPoint)

Begins a stroke in the canvas.

function beginStroke(p: IPointerPoint)

Parameters

p

IPointerPoint

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

p

IPointerPoint

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.