DryWetCanvas class

Package:

@microsoft/live-share-canvas

Represents the base class from wet and dry canvases, implementing the common rendering logic.

Extends

InkingCanvas

Constructors

DryWetCanvas(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

DryWetCanvas(HTMLElement)

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

new DryWetCanvas(_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 InkingCanvas.fadeOutDuration

highlighterOpacity

Configures the opacity of highlighter strokes.

static highlighterOpacity: number

Property Value

number

Inherited From InkingCanvas.highlighterOpacity

laserShadowOpacity

Configures the opacity of the laser stroke shadow.

static laserShadowOpacity: number

Property Value

number

Inherited From InkingCanvas.laserShadowOpacity

referencePoint

The canvas' reference point.

referencePoint: CanvasReferencePoint

Property Value

CanvasReferencePoint

Inherited From InkingCanvas.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 InkingCanvas.addPoint

beginStroke(IPointerPoint)

Begins a stroke in the canvas.

function beginStroke(p: IPointerPoint)

Parameters

p

IPointerPoint

The starting point of the stroke.

Inherited From InkingCanvas.beginStroke

cancelStroke()

Cancels the current stroke.

function cancelStroke()

Inherited From InkingCanvas.cancelStroke

clear()

Clears the canvas.

function clear()

Inherited From InkingCanvas.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 InkingCanvas.endStroke

fadeOut()

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

function fadeOut()

Inherited From InkingCanvas.fadeOut

removeFromDOM()

Removes the canvas from the DOM.

function removeFromDOM()

Inherited From InkingCanvas.removeFromDOM

renderStroke(IStroke)

Renders the specified stroke onto the canvas.

function renderStroke(stroke: IStroke)

Parameters

stroke

IStroke

The stroke to render.

Inherited From InkingCanvas.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 InkingCanvas.resize

setBrush(IBrush)

Sets the current brush for the canvas.

function setBrush(value: IBrush)

Parameters

value

IBrush

The brush.

Inherited From InkingCanvas.setBrush