WetCanvas class

Package:

@microsoft/live-share-canvas

Represents a canvas suitable for "wet ink", i.e. an ongoing stroke.

Extends

DryWetCanvas

Constructors

WetCanvas(HTMLElement)

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

Properties

brush	Gets the canvas' brush.
canvas	Gets the underlying HTML5 Canvas element.
offset	Gets the offset from the canvas' reference point, in pixels.
scale	Gets the canvas' scale. Defaults to 1.

Inherited Properties

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.
referencePoint	The canvas' reference point.

Inherited 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

WetCanvas(HTMLElement)

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

new WetCanvas(_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

offset

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

Readonly<IPoint> offset

Property Value

Readonly<IPoint>

scale

Gets the canvas' scale. Defaults to 1.

number scale

Property Value

number

Inherited Property Details

fadeOutDuration

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

static fadeOutDuration: number

Property Value

number

Inherited From DryWetCanvas.fadeOutDuration

highlighterOpacity

Configures the opacity of highlighter strokes.

static highlighterOpacity: number

Property Value

number

Inherited From DryWetCanvas.highlighterOpacity

laserShadowOpacity

Configures the opacity of the laser stroke shadow.

static laserShadowOpacity: number

Property Value

number

Inherited From DryWetCanvas.laserShadowOpacity

referencePoint

The canvas' reference point.

referencePoint: CanvasReferencePoint

Property Value

CanvasReferencePoint

Inherited From DryWetCanvas.referencePoint

Inherited 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.

Inherited From DryWetCanvas.addPoint

beginStroke(IPointerPoint)

Begins a stroke in the canvas.

function beginStroke(p: IPointerPoint)

Parameters

p

IPointerPoint

The starting point of the stroke.

Inherited From DryWetCanvas.beginStroke

cancelStroke()

Cancels the current stroke.

function cancelStroke()

Inherited From DryWetCanvas.cancelStroke

clear()

Clears the canvas.

function clear()

Inherited From DryWetCanvas.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.

Inherited From DryWetCanvas.endStroke

fadeOut()

Fades the canvas out by decreasing its opacity, and eventually removes it from the DOM.

function fadeOut()

Inherited From DryWetCanvas.fadeOut

removeFromDOM()

Removes the canvas from the DOM.

function removeFromDOM()

Inherited From DryWetCanvas.removeFromDOM

renderStroke(IStroke)

Renders the specified stroke onto the canvas.

function renderStroke(stroke: IStroke)

Parameters

stroke

IStroke

The stroke to render.

Inherited From DryWetCanvas.renderStroke

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.

Inherited From DryWetCanvas.resize

setBrush(IBrush)

Sets the current brush for the canvas.

function setBrush(value: IBrush)

Parameters

value

IBrush

The brush.

Inherited From DryWetCanvas.setBrush