CanvasRenderer

class CanvasRenderer extends Renderer

a canvas renderer object

Constructor


new CanvasRenderer(options: Application.Settings) → {}
Parameters:
Name Type Attributes Description
options Application.Settings

<optional>

optional parameters for the renderer

Summary


Methods from CanvasRenderer

beginPath()
clear()

prepare the framebuffer for drawing a new frame

clearColor(color: Color | string, opaque: boolean)
clearMask()
clearRect(x: number, y: number, width: number, height: number)
clipRect(x: number, y: number, width: number, height: number)
closePath()

add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing

CanvasPattern
createPattern(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame, repeat: string)
drawImage(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number)
drawPattern(pattern: CanvasPattern, x: number, y: number, width: number, height: number)
fill(shape: Rect | RoundRect | Polygon | Line | Ellipse)
fillArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise: boolean)
fillEllipse(x: number, y: number, w: number, h: number)
fillLine(startX: number, startY: number, endX: number, endY: number)
fillPoint(x: number, y: number, width: number, height: number)
fillPolygon(poly: Polygon)
fillRect(x: number, y: number, width: number, height: number)
fillRoundRect(x: number, y: number, width: number, height: number, radius: number)
number
getGlobalAlpha()
lineTo(x, y)

adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.

moveTo(x: number, y: number)
rect(x: number, y: number, width: number, height: number)
reset()

Reset context state

resetTransform()

Reset the canvas transform to identity

restore()
rotate(angle: number)
roundRect(x: number, y: number, width: number, height: number, radius: number)
save()
scale(x: number, y: number)
setBlendMode(mode: string, context: CanvasRenderingContext2D)
setColor(color: Color | string)
setGlobalAlpha(alpha: number)
setLineWidth(width: number)
setMask(mask: Rect | RoundRect | Polygon | Line | Ellipse, invert: boolean)
setTransform(a: Matrix2d | number, b: number, c: number, d: number, e: number, f: number)
stroke(shape: Rect | RoundRect | Polygon | Line | Ellipse, fill: boolean)
strokeArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise: boolean, fill: boolean)
strokeEllipse(x: number, y: number, w: number, h: number, fill: boolean)
strokeLine(startX: number, startY: number, endX: number, endY: number)
strokePoint(x: number, y: number)
strokePolygon(poly: Polygon, fill: boolean)
strokeRect(x: number, y: number, width: number, height: number, fill: boolean)
strokeRoundRect(x: number, y: number, width: number, height: number, radius: number, fill: boolean)
transform(a: Matrix2d | number, b: number, c: number, d: number, e: number, f: number)
translate(x: number, y: number)

Public Methods


beginPath canvas_renderer.js:245
beginPath() → {}

starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path

// First path
renderer.beginPath();
renderer.setColor("blue");
renderer.moveTo(20, 20);
renderer.lineTo(200, 20);
renderer.stroke();
// Second path
renderer.beginPath();
renderer.setColor("green");
renderer.moveTo(20, 20);
renderer.lineTo(120, 120);
renderer.stroke();
clear canvas_renderer.js:107
clear() → {}

prepare the framebuffer for drawing a new frame

clearColor canvas_renderer.js:118
clearColor(color: Color | string, opaque: boolean) → {}

Clears the main framebuffer with the given color

Parameters:
Name Type Attributes Default Description
color Color | string

<optional>

"#000000"

CSS color.

opaque boolean

<optional>

false

Allow transparency [default] or clear the surface completely [true]

clearMask canvas_renderer.js:856
clearMask() → {}

disable (remove) the rendering mask set through setMask.

See: CanvasRenderer#setMask
clearRect canvas_renderer.js:136
clearRect(x: number, y: number, width: number, height: number) → {}

Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).

Parameters:
Name Type Description
x number

x axis of the coordinate for the rectangle starting point.

y number

y axis of the coordinate for the rectangle starting point.

width number

The rectangle's width.

height number

The rectangle's height.

clipRect canvas_renderer.js:737
clipRect(x: number, y: number, width: number, height: number) → {}

clip the given region from the original canvas. Once a region is clipped, all future drawing will be limited to the clipped region. You can however save the current region using the save(), and restore it (with the restore() method) any time in the future. (this is an experimental feature !)

Parameters:
Name Type Description
x number
y number
width number
height number
closePath canvas_renderer.js:329
closePath() → {}

add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing

createPattern canvas_renderer.js:147
createPattern(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame, repeat: string) → {CanvasPattern}

Create a pattern with the specified repetition

let tileable   = renderer.createPattern(image, "repeat");
let horizontal = renderer.createPattern(image, "repeat-x");
let vertical   = renderer.createPattern(image, "repeat-y");
let basic      = renderer.createPattern(image, "no-repeat");
Parameters:
Name Type Description
image HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame

Source image to be used as the pattern's image

repeat string

Define how the pattern should be repeated

Returns:
Type Description
CanvasPattern
See: ImageLayer#repeat
drawImage canvas_renderer.js:163
drawImage(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number) → {}

Draw an image onto the main using the canvas api

// Position the image on the canvas:
renderer.drawImage(image, dx, dy);
// Position the image on the canvas, and specify width and height of the image:
renderer.drawImage(image, dx, dy, dWidth, dHeight);
// Clip the image and position the clipped part on the canvas:
renderer.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Parameters:
Name Type Description
image HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame

An element to draw into the context.

sx number

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy number

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw number

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.

sh number

The height of the sub-rectangle of the source image to draw into the destination context.

dx number

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy number

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dw number

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dh number

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

drawPattern canvas_renderer.js:224
drawPattern(pattern: CanvasPattern, x: number, y: number, width: number, height: number) → {}

Draw a pattern within the given rectangle.

Parameters:
Name Type Description
pattern CanvasPattern

Pattern object

x number
y number
width number
height number
See: CanvasRenderer#createPattern
fill canvas_renderer.js:321
fill(shape: Rect | RoundRect | Polygon | Line | Ellipse) → {}

fill the given shape or the current defined path

Parameters:
Name Type Attributes Description
shape Rect | RoundRect | Polygon | Line | Ellipse

<optional>

a shape object to fill

fillArc canvas_renderer.js:361
fillArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise: boolean) → {}

Fill an arc at the specified coordinates with given radius, start and end points

Parameters:
Name Type Attributes Default Description
x number

arc center point x-axis

y number

arc center point y-axis

radius number
start number

start angle in radians

end number

end angle in radians

antiClockwise boolean

<optional>

false

draw arc anti-clockwise

fillEllipse canvas_renderer.js:413
fillEllipse(x: number, y: number, w: number, h: number) → {}

Fill an ellipse at the specified coordinates with given radius

Parameters:
Name Type Description
x number

ellipse center point x-axis

y number

ellipse center point y-axis

w number

horizontal radius of the ellipse

h number

vertical radius of the ellipse

fillLine canvas_renderer.js:445
fillLine(startX: number, startY: number, endX: number, endY: number) → {}

Fill a line of the given two points

Parameters:
Name Type Description
startX number

the start x coordinate

startY number

the start y coordinate

endX number

the end x coordinate

endY number

the end y coordinate

fillPoint canvas_renderer.js:565
fillPoint(x: number, y: number, width: number, height: number) → {}

Draw a a point at the specified coordinates

Parameters:
Name Type Description
x number
y number
width number
height number
fillPolygon canvas_renderer.js:486
fillPolygon(poly: Polygon) → {}

Fill the given me.Polygon on the screen

Parameters:
Name Type Description
poly Polygon

the shape to draw

fillRect canvas_renderer.js:512
fillRect(x: number, y: number, width: number, height: number) → {}

Draw a filled rectangle at the specified coordinates

Parameters:
Name Type Description
x number
y number
width number
height number
fillRoundRect canvas_renderer.js:544
fillRoundRect(x: number, y: number, width: number, height: number, radius: number) → {}

Draw a rounded filled rectangle at the specified coordinates

Parameters:
Name Type Description
x number
y number
width number
height number
radius number
getGlobalAlpha canvas_renderer.js:663
getGlobalAlpha() → {number}

Return the global alpha

Returns:
Type Description
number

global alpha value

lineTo canvas_renderer.js:274
lineTo(x, y) → {}

adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.

Parameters:
Name Type Description
x
y
moveTo canvas_renderer.js:265
moveTo(x: number, y: number) → {}

begins a new sub-path at the point specified by the given (x, y) coordinates.

Parameters:
Name Type Description
x number

The x axis of the point.

y number

The y axis of the point.

rect canvas_renderer.js:281
rect(x: number, y: number, width: number, height: number) → {}

creates a rectangular path whose starting point is at (x, y) and whose size is specified by width and height.

Parameters:
Name Type Description
x number

The x axis of the coordinate for the rectangle starting point.

y number

The y axis of the coordinate for the rectangle starting point.

width number

The rectangle's width.

height number

The rectangle's height.

reset canvas_renderer.js:53
reset() → {}

Reset context state

resetTransform canvas_renderer.js:61
resetTransform() → {}

Reset the canvas transform to identity

restore canvas_renderer.js:576
restore() → {}

restores the most recently saved renderer state by popping the top entry in the drawing state stack

 // Save the current state
 renderer.save();

 // apply a transform and draw a rect
 renderer.tranform(matrix);
 renderer.fillRect(10, 10, 100, 100);

 // Restore to the state saved by the most recent call to save()
 renderer.restore();
rotate canvas_renderer.js:615
rotate(angle: number) → {}

adds a rotation to the transformation matrix.

 // Rotated rectangle
 renderer.rotate((45 * Math.PI) / 180);
 renderer.setColor("red");
 renderer.fillRect(10, 10, 100, 100);

 // Reset transformation matrix to the identity matrix
 renderer.setTransform(1, 0, 0, 1, 0, 0);
Parameters:
Name Type Description
angle number

the rotation angle, clockwise in radians

roundRect canvas_renderer.js:292
roundRect(x: number, y: number, width: number, height: number, radius: number) → {}

adds a rounded rectangle to the current path.

Parameters:
Name Type Description
x number

The x axis of the coordinate for the rectangle starting point.

y number

The y axis of the coordinate for the rectangle starting point.

width number

The rectangle's width.

height number

The rectangle's height.

radius number

The corner radius.

save canvas_renderer.js:598
save() → {}

saves the entire state of the renderer by pushing the current state onto a stack.

 // Save the current state
 renderer.save();

 // apply a transform and draw a rect
 renderer.tranform(matrix);
 renderer.fillRect(10, 10, 100, 100);

 // Restore to the state saved by the most recent call to save()
 renderer.restore();
scale canvas_renderer.js:631
scale(x: number, y: number) → {}

adds a scaling transformation to the renderer units horizontally and/or vertically

Parameters:
Name Type Description
x number

Scaling factor in the horizontal direction. A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.

y number

Scaling factor in the vertical direction. A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling

setBlendMode canvas_renderer.js:68
setBlendMode(mode: string, context: CanvasRenderingContext2D) → {}

set a blend mode for the given context.
Supported blend mode between Canvas and WebGL remderer :

  • "normal" : this is the default mode and draws new content on top of the existing content

  • "multiply" : the pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result.

  • "additive or lighter" : where both content overlap the color is determined by adding color values.

  • "screen" : The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply)

Parameters:
Name Type Attributes Default Description
mode string

<optional>

"normal"

blend mode : "normal", "multiply", "lighter, "additive", "screen"

context CanvasRenderingContext2D

<optional>

See: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
setColor canvas_renderer.js:640
setColor(color: Color | string) → {}

Set the current fill & stroke style color. By default, or upon reset, the value is set to #000000.

Parameters:
Name Type Description
color Color | string

css color value

setGlobalAlpha canvas_renderer.js:655
setGlobalAlpha(alpha: number) → {}

Set the global alpha

Parameters:
Name Type Description
alpha number

0.0 to 1.0 values accepted.

setLineWidth canvas_renderer.js:671
setLineWidth(width: number) → {}

Set the line width on the context

Parameters:
Name Type Description
width number

Line width

setMask canvas_renderer.js:769
setMask(mask: Rect | RoundRect | Polygon | Line | Ellipse, invert: boolean) → {}

A mask limits rendering elements to the shape and position of the given mask object. If the drawing or rendering area is larger than the mask, only the intersecting part of the renderable will be visible. (Note Mask are not preserved through renderer context save and restore and need so be manually cleared)

Parameters:
Name Type Attributes Default Description
mask Rect | RoundRect | Polygon | Line | Ellipse

<optional>

the shape defining the mask to be applied

invert boolean

<optional>

false

either the given shape should define what is visible (default) or the opposite

See: CanvasRenderer#clearMask
setTransform canvas_renderer.js:679
setTransform(a: Matrix2d | number, b: number, c: number, d: number, e: number, f: number) → {}

Reset (overrides) the renderer transformation matrix to the identity one, and then apply the given transformation matrix.

Parameters:
Name Type Description
a Matrix2d | number

a matrix2d to transform by, or a the a component to multiply the current matrix by

b number

the b component to multiply the current matrix by

c number

the c component to multiply the current matrix by

d number

the d component to multiply the current matrix by

e number

the e component to multiply the current matrix by

f number

the f component to multiply the current matrix by

stroke canvas_renderer.js:304
stroke(shape: Rect | RoundRect | Polygon | Line | Ellipse, fill: boolean) → {}

stroke the given shape or the current defined path

Parameters:
Name Type Attributes Default Description
shape Rect | RoundRect | Polygon | Line | Ellipse

<optional>

a shape object to stroke

fill boolean

<optional>

false

fill the shape with the current color if true

strokeArc canvas_renderer.js:337
strokeArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise: boolean, fill: boolean) → {}

Stroke an arc at the specified coordinates with given radius, start and end points

Parameters:
Name Type Attributes Default Description
x number

arc center point x-axis

y number

arc center point y-axis

radius number
start number

start angle in radians

end number

end angle in radians

antiClockwise boolean

<optional>

false

draw arc anti-clockwise

fill boolean

<optional>

false

also fill the shape with the current color if true

strokeEllipse canvas_renderer.js:374
strokeEllipse(x: number, y: number, w: number, h: number, fill: boolean) → {}

Stroke an ellipse at the specified coordinates with given radius

Parameters:
Name Type Attributes Default Description
x number

ellipse center point x-axis

y number

ellipse center point y-axis

w number

horizontal radius of the ellipse

h number

vertical radius of the ellipse

fill boolean

<optional>

false

also fill the shape with the current color if true

strokeLine canvas_renderer.js:424
strokeLine(startX: number, startY: number, endX: number, endY: number) → {}

Stroke a line of the given two points

Parameters:
Name Type Description
startX number

the start x coordinate

startY number

the start y coordinate

endX number

the end x coordinate

endY number

the end y coordinate

strokePoint canvas_renderer.js:556
strokePoint(x: number, y: number) → {}

Stroke a Point at the specified coordinates

Parameters:
Name Type Description
x number
y number
strokePolygon canvas_renderer.js:456
strokePolygon(poly: Polygon, fill: boolean) → {}

Stroke the given me.Polygon on the screen

Parameters:
Name Type Attributes Default Description
poly Polygon

the shape to draw

fill boolean

<optional>

false

also fill the shape with the current color if true

strokeRect canvas_renderer.js:494
strokeRect(x: number, y: number, width: number, height: number, fill: boolean) → {}

Stroke a rectangle at the specified coordinates

Parameters:
Name Type Attributes Default Description
x number
y number
width number
height number
fill boolean

<optional>

false

also fill the shape with the current color if true

strokeRoundRect canvas_renderer.js:523
strokeRoundRect(x: number, y: number, width: number, height: number, radius: number, fill: boolean) → {}

Stroke a rounded rectangle at the specified coordinates

Parameters:
Name Type Attributes Default Description
x number
y number
width number
height number
radius number
fill boolean

<optional>

false

also fill the shape with the current color if true

transform canvas_renderer.js:694
transform(a: Matrix2d | number, b: number, c: number, d: number, e: number, f: number) → {}

Multiply given matrix into the renderer tranformation matrix

Parameters:
Name Type Description
a Matrix2d | number

a matrix2d to transform by, or a the a component to multiply the current matrix by

b number

the b component to multiply the current matrix by

c number

the c component to multiply the current matrix by

d number

the d component to multiply the current matrix by

e number

the e component to multiply the current matrix by

f number

the f component to multiply the current matrix by

See: CanvasRenderer.setTransform which will reset the current transform matrix prior to performing the new transformation
translate canvas_renderer.js:724
translate(x: number, y: number) → {}

adds a translation transformation to the current matrix.

Parameters:
Name Type Description
x number

Distance to move in the horizontal direction. Positive values are to the right, and negative to the left.

y number

Distance to move in the vertical direction. Positive values are down, and negative are up.


Powered by webdoc!