Class CanvasRenderer

Renders onto a CanvasRenderingContext2D.

Example

const editor = new Editor(document.body);

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Ensure that the canvas can fit the entire rendering
const viewport = editor.image.getImportExportViewport();
canvas.width = viewport.getScreenRectSize().x;
canvas.height = viewport.getScreenRectSize().y;

// Render editor.image onto the renderer
const renderer = new CanvasRenderer(ctx, viewport);
editor.image.render(renderer, viewport);

Hierarchy (view full)

AbstractRenderer
- CanvasRenderer

Constructors

constructor

new CanvasRenderer(ctx, viewport): CanvasRenderer
Creates a new CanvasRenderer that renders to the given rendering context. The viewport is used to determine the translation/rotation/scaling of the content to draw.
Parameters
- ctx: CanvasRenderingContext2D
- viewport: Viewport
Returns CanvasRenderer
Overrides AbstractRenderer.constructor
- Defined in rendering/renderers/CanvasRenderer.ts:50

Properties

`Protected` objectLevel

objectLevel: number = 0

Methods

`Protected` beginPath

beginPath(startPoint): void
Parameters
- startPoint: Vec3
Returns void
Overrides AbstractRenderer.beginPath
- Defined in rendering/renderers/CanvasRenderer.ts:110

canRenderFromWithoutDataLoss

canRenderFromWithoutDataLoss(other): boolean
Returns true iff other can be rendered onto this without data loss.
Parameters
- other: AbstractRenderer
Returns boolean
Overrides AbstractRenderer.canRenderFromWithoutDataLoss
- Defined in rendering/renderers/CanvasRenderer.ts:68

canvasToScreen

canvasToScreen(vec): Vec3
Parameters
- vec: Vec3
Returns Vec3
Inherited from AbstractRenderer.canvasToScreen
- Defined in rendering/renderers/AbstractRenderer.ts:231

clear

clear(): void
Returns void
Overrides AbstractRenderer.clear
- Defined in rendering/renderers/CanvasRenderer.ts:103

displaySize

displaySize(): Vec3
Returns the size of the rendered region of this on the display (in pixels).

Returns Vec3
Overrides AbstractRenderer.displaySize
- Defined in rendering/renderers/CanvasRenderer.ts:96

drawImage

drawImage(image): void
Parameters
- image: RenderableImage
Returns void
Overrides AbstractRenderer.drawImage
- Defined in rendering/renderers/CanvasRenderer.ts:217

drawPath

drawPath(path): void
Draws a styled path. If within an object started by startObject, the resultant path may not be visible until endObject is called.
Parameters
- path: RenderablePathSpec
Returns void
Overrides AbstractRenderer.drawPath
- Defined in rendering/renderers/CanvasRenderer.ts:183

drawRect

drawRect(rect, lineWidth, lineFill): void
Strokes a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill]. This is equivalent to drawPath(Path.fromRect(...).toRenderable(...)).
Parameters
- rect: Rect2
- lineWidth: number
- lineFill: RenderingStyle
Returns void
Inherited from AbstractRenderer.drawRect
- Defined in rendering/renderers/AbstractRenderer.ts:135

drawText

drawText(text, transform, style): void
Parameters
- text: string
- transform: Mat33
- style: TextRenderingStyle
Returns void
Overrides AbstractRenderer.drawText
- Defined in rendering/renderers/CanvasRenderer.ts:198

endObject

endObject(): void
Notes the end of an object.

Returns void
Overrides AbstractRenderer.endObject
- Defined in rendering/renderers/CanvasRenderer.ts:254

`Protected` endPath

endPath(style): void
Parameters
- style: RenderingStyle
Returns void
Overrides AbstractRenderer.endPath
- Defined in rendering/renderers/CanvasRenderer.ts:117

fillRect

fillRect(rect, fill): void
Draws a filled rectangle.
Parameters
- rect: Rect2
- fill: Color4
Returns void
Inherited from AbstractRenderer.fillRect
- Defined in rendering/renderers/AbstractRenderer.ts:141

getCanvasToScreenTransform

getCanvasToScreenTransform(): Mat33
Get the matrix that transforms a vector on the canvas to a vector on this' rendering target.

Returns Mat33
Inherited from AbstractRenderer.getCanvasToScreenTransform
- Defined in rendering/renderers/AbstractRenderer.ts:224

`Protected` getNestingLevel

getNestingLevel(): number
Returns number
Inherited from AbstractRenderer.getNestingLevel
- Defined in rendering/renderers/AbstractRenderer.ts:185

getSizeOfCanvasPixelOnScreen

getSizeOfCanvasPixelOnScreen(): number
Returns number
Inherited from AbstractRenderer.getSizeOfCanvasPixelOnScreen
- Defined in rendering/renderers/AbstractRenderer.ts:235

`Protected` getViewport

getViewport(): Viewport
this.canvasToScreen, etc. should be used instead of the corresponding methods on Viewport, because the viewport may not accurately reflect what is rendered.

Returns Viewport
Inherited from AbstractRenderer.getViewport
- Defined in rendering/renderers/AbstractRenderer.ts:43

getVisibleRect

getVisibleRect(): Rect2
Returns the region in canvas space that is visible within the viewport this canvas is rendering to.

Note that in some cases this might not be the same as the visibleRect given to components in their render method.

Returns Rect2
Inherited from AbstractRenderer.getVisibleRect
- Defined in rendering/renderers/AbstractRenderer.ts:253

`Protected` lineTo

lineTo(point): void
Parameters
- point: Vec3
Returns void
Overrides AbstractRenderer.lineTo
- Defined in rendering/renderers/CanvasRenderer.ts:142

`Protected` moveTo

moveTo(point): void
Parameters
- point: Vec3
Returns void
Overrides AbstractRenderer.moveTo
- Defined in rendering/renderers/CanvasRenderer.ts:147

popTransform

popTransform(): void
Returns void
Inherited from AbstractRenderer.popTransform
- Defined in rendering/renderers/AbstractRenderer.ts:214

pushTransform

pushTransform(transform): void
Parameters
- transform: Mat33
Returns void
Inherited from AbstractRenderer.pushTransform
- Defined in rendering/renderers/AbstractRenderer.ts:209

renderFromOtherOfSameType

renderFromOtherOfSameType(transformBy, other): void
MUST throw if other and this are not of the same base class.
Parameters
- transformBy: Mat33
- other: AbstractRenderer
Returns void
Overrides AbstractRenderer.renderFromOtherOfSameType
- Defined in rendering/renderers/CanvasRenderer.ts:72

setDraftMode

setDraftMode(draftMode): void
Set parameters for lower/higher quality rendering
Parameters
- draftMode: boolean
Returns void
Overrides AbstractRenderer.setDraftMode
- Defined in rendering/renderers/CanvasRenderer.ts:84

setTransform

setTransform(transform): void
Set a transformation to apply to things before rendering, replacing the viewport's transform.
Parameters
- transform: null | Mat33
Returns void
Inherited from AbstractRenderer.setTransform
- Defined in rendering/renderers/AbstractRenderer.ts:205

startObject

startObject(boundingBox, clip?): void
This should be called whenever a new object is being drawn.
Parameters
- boundingBox: Rect2
  The bounding box of the object to be drawn.
- Optional clip: boolean
  Whether content outside _boundingBox should be drawn. Renderers that override this method are not required to support _clip.
Returns void
Overrides AbstractRenderer.startObject
- Defined in rendering/renderers/CanvasRenderer.ts:227

`Protected` traceCubicBezierCurve

traceCubicBezierCurve(p1, p2, p3): void
Parameters
- p1: Vec3
- p2: Vec3
- p3: Vec3
Returns void
Overrides AbstractRenderer.traceCubicBezierCurve
- Defined in rendering/renderers/CanvasRenderer.ts:152

`Protected` traceQuadraticBezierCurve

traceQuadraticBezierCurve(controlPoint, endPoint): void
Parameters
- controlPoint: Vec3
- endPoint: Vec3
Returns void
Overrides AbstractRenderer.traceQuadraticBezierCurve
- Defined in rendering/renderers/CanvasRenderer.ts:168

Class CanvasRenderer

Example

Hierarchy (view full)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

ctx: CanvasRenderingContext2D

viewport: Viewport

Returns CanvasRenderer

Properties

Protected objectLevel

Methods

Protected beginPath

Parameters

startPoint: Vec3

Returns void

canRenderFromWithoutDataLoss

Parameters

other: AbstractRenderer

Returns boolean

canvasToScreen

Parameters

vec: Vec3

Returns Vec3

clear

Returns void

displaySize

Returns Vec3

drawImage

Parameters

image: RenderableImage

Returns void

drawPath

Parameters

path: RenderablePathSpec

Returns void

drawRect

Parameters

rect: Rect2

lineWidth: number

lineFill: RenderingStyle

Returns void

drawText

Parameters

text: string

transform: Mat33

style: TextRenderingStyle

Returns void

endObject

Returns void

Protected endPath

Parameters

style: RenderingStyle

Returns void

fillRect

Parameters

rect: Rect2

fill: Color4

Returns void

getCanvasToScreenTransform

Returns Mat33

Protected getNestingLevel

Returns number

getSizeOfCanvasPixelOnScreen

Returns number

Protected getViewport

Returns Viewport

getVisibleRect

Returns Rect2

Protected lineTo

Parameters

point: Vec3

Returns void

Protected moveTo

Parameters

point: Vec3

`Protected` objectLevel

`Protected` beginPath

`Protected` endPath

`Protected` getNestingLevel

`Protected` getViewport

`Protected` lineTo

`Protected` moveTo

`Optional` clip: boolean

`Protected` traceCubicBezierCurve

`Protected` traceQuadraticBezierCurve