@microsoft/live-share-canvas package

Classes

DryCanvas	Represents a canvas suitable for "dry ink", i.e. the persistent drawing. DryCanvas renders synchonously.
DryWetCanvas	Represents the base class from wet and dry canvases, implementing the common rendering logic.
InkingCanvas	Represents the base class for all canvases. InkingCanvas provides resizing, coordinate tramnslation and base drawingprimitives.
InkingManager	Handles user interaction with a canvas, and manages the rendering of wet and dry strokes.
InputFilter	Defines an input filter. Input filters are used to transform input points on the fly.
InputFilterCollection	Represents a collection of input filters.
InputProvider	A basic input event provider implementation.
JitterFilter	Implements a jitter reduction filter, which straightens stroke by ignoring micro movements detected by the input device, mainly pens.
LaserPointerCanvas	Represents a canvas that implements the laser pointer behavior.
LiveCanvas	Enables live and collaborative inking.
LiveCursor	Represents a live (shared) cursor. Applications that want to customize the appearance of cursors on the screen should extend LiveCursor and override its renderedElement property to return a custom HTML element.
MulticastEvent	Implements a simple typed multicast event.
PointerInputProvider	InputProvider implementation that hooks into a DOM element's pointer events.
Stroke	Represents a concrete stroke object.
WetCanvas	Represents a canvas suitable for "wet ink", i.e. an ongoing stroke.

Interfaces

IAddPointsEventArgs	Defines the arguments of the AddPointsEvent.
IAddRemoveStrokeOptions	Defines options used by InkingManager.addStroke and InkingManager.removeStroke.
IBeginStrokeEventArgs	Defines the arguments of the BeginStrokeEvent.
IBrush	Defines a brush as used to draw strokes.
IColor	Defines an RGB color
IMulticastEvent	Defines a typed multicast event, i.e. an event that can have multiple listeners.
IPoint	Defines a 2D point.
IPointerEvent	Represents a pointer event such as up, down or enter.
IPointerMoveEvent	Representes a a pointer move event.
IPointerMovedEventArgs	Defines the arguments of the PointerMovedEvent.
IPointerPoint	Defines a 2D point with pointer pressure.
IRawStroke	Represents the raw data of a stroke.
IRect	Defines a rectangle.
ISegment	Defines a segment between two points.
IStroke	Defines a stroke, i.e. a collection of points that can be rendered on a canvas.
IStrokeCreationOptions	Defines a set of options when creating new strokes.
IUserInfo	Encapsulates information about a user.
IWetStroke	Defines a "wet" stroke, i.e. a stroke as it's being drawn.

Type Aliases

ArrowType
BrushTipShape	Defines the shape of a brush's tip.
BrushType	Defines brush types.
CanvasReferencePoint	Defines the refernece point of a canvas. The reference point is the origin used for panning and zooming operations.
EventListener	Defines a typed callback function used by multicast events.

Enums

InkingTool	Defines available inking tools.
StrokeEndState
StrokeMode	Stroke modes.
StrokeType	Stroke types.

Functions

combineRects(IRect, IRect)
darkenColor(IColor, number)	Darkens the given color by a certain intensity.
expandRect(IRect, IPoint)	Expands the specified rectangle so it contains the specified point.
fromCssColor(string)	Converts a CSS color expressed in the #RRGGBB format into an IColor object
getDistanceBetweenPoints(IPoint, IPoint)	Computes the distance between two points.
getPressureAdjustedSize(number, number)	Adjusts a size given a pointer pressure.
getSquaredDistanceBetweenPoints(IPoint, IPoint)	Computes the square of the distance between two points. This provides a cheaper way to compare multiple distances since it doesn't compute any square root.
lightenColor(IColor, number)	Lightens the given color by a certain intensity.
screenToViewport(IPoint, IPoint, IPoint, number)	Converts screen coordinates to viewport coordinates.
toCssRgbaColor(IColor, number)	Converts an IColor object into its CSS rgba() representation.
viewportToScreen(IPoint, IPoint, IPoint, number)	Converts viewport coordinates to screen coordinates.

Function Details

combineRects(IRect, IRect)

function combineRects(rect1: IRect, rect2: IRect): IRect

Parameters

rect1

IRect

rect2

IRect

Returns

IRect

darkenColor(IColor, number)

Darkens the given color by a certain intensity.

function darkenColor(color: IColor, intensity: number): IColor

Parameters

color

IColor

The color to darken.

intensity

number

The intensity of the darkening. Must be between 0 and 100.

Returns

IColor

The darkened color.

expandRect(IRect, IPoint)

Expands the specified rectangle so it contains the specified point.

function expandRect(rect: IRect, point: IPoint): IRect

Parameters

rect

IRect

The rectangle to extend.

point

IPoint

The point to extend the rectangle to.

Returns

IRect

The expanded rectangle.

fromCssColor(string)

Converts a CSS color expressed in the #RRGGBB format into an IColor object

function fromCssColor(color: string): IColor

Parameters

color

string

The CSS color to convert.

Returns

IColor

The converted color as an IColor object, or a default color if the provided color string isn't valid.

getDistanceBetweenPoints(IPoint, IPoint)

Computes the distance between two points.

function getDistanceBetweenPoints(p1: IPoint, p2: IPoint): number

Parameters

p1

IPoint

The first point.

p2

IPoint

The second point.

Returns

number

The distance between p1 and p2.

getPressureAdjustedSize(number, number)

Adjusts a size given a pointer pressure.

function getPressureAdjustedSize(baseSize: number, pressure: number): number

Parameters

baseSize

number

The size to adjust.

pressure

number

The pressure.

Returns

number

The adjusted size.

getSquaredDistanceBetweenPoints(IPoint, IPoint)

Computes the square of the distance between two points. This provides a cheaper way to compare multiple distances since it doesn't compute any square root.

function getSquaredDistanceBetweenPoints(p1: IPoint, p2: IPoint): number

Parameters

p1

IPoint

The first point.

p2

IPoint

The second point.

Returns

number

The square of the distance between p1 and p2.

lightenColor(IColor, number)

Lightens the given color by a certain intensity.

function lightenColor(color: IColor, intensity: number): IColor

Parameters

color

IColor

The color to lighten.

intensity

number

The intensity of the lightening. Must be between 0 and 100.

Returns

IColor

The lightened color.

screenToViewport(IPoint, IPoint, IPoint, number)

Converts screen coordinates to viewport coordinates.

function screenToViewport(p: IPoint, viewportReferencePoint: IPoint, viewportOffset: IPoint, scale: number): IPoint

Parameters

p

IPoint

The point to convert.

viewportReferencePoint

IPoint

The videwport's reference point.

viewportOffset

IPoint

The viewport offset.

scale

number

The viewport scale. Defaults to 1 if the provided value is less than or equal to 0.

Returns

IPoint

The converted point.

toCssRgbaColor(IColor, number)

Converts an IColor object into its CSS rgba() representation.

function toCssRgbaColor(color: IColor, alpha?: number): string

Parameters

color

IColor

The color to convert.

alpha

number

Returns

string

A string representing the CSS rgba() representation of the color.

viewportToScreen(IPoint, IPoint, IPoint, number)

Converts viewport coordinates to screen coordinates.

function viewportToScreen(p: IPoint, viewportReferencePoint: IPoint, viewportOffset: IPoint, scale: number): IPoint

Parameters

p

IPoint

The point to convert.

viewportReferencePoint

IPoint

The viewport's reference point.

viewportOffset

IPoint

The viewport offset.

scale

number

The viewport scale. Defaults to 1 if the provided value is less than or equal to 0.

Returns

IPoint

The converted point.