Class “CanvasContext”

Object > CanvasContext

The CanvasContext is used for drawing onto the canvas. It is a subset of the HTML5 CanvasRenderingContext2D.

Constructor private
Singleton No
Namespace tabris
Direct subclasses None
JSX support No

Example

import {Canvas, contentView} from 'tabris';

new Canvas({layoutData: 'fill'})
  .onResize(({target: canvas, width, height}) => {
    let context = canvas.getContext("2d", width, height);
    context.moveTo(0, 0);
    // ...
  }).appendTo(contentView);

Methods

arc(x, y, radius, startAngle, endAngle, anticlockwise?)

Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).

Parameter Type Optional Description
x number No The x coordinate of the arc’s center.
y number No The y coordinate of the arc’s center.
radius number No The arc’s radius.
startAngle number No The angle in radians at which the arc starts, measured clockwise from the positive x axis.
endAngle number No The angle in radians at which the arc ends, measured clockwise from the positive x axis.
anticlockwise boolean Yes if true, causes the arc to be drawn counter-clockwise between the two angles.

Returns void

beginPath()

Starts a new path by emptying the list of sub-paths.

Returns void

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Adds a cubic Bézier curve to the path. The starting point is the last point in the current path.

Parameter Type Optional Description
cp1x number No The x axis of the coordinate for the first control point.
cp1y number No The y axis of the coordinate for the first control point.
cp2x number No The x axis of the coordinate for the second control point.
cp2y number No The y axis of the coordinate for the second control point.
x number No The x axis of the coordinate for the end point.
y number No The y axis of the coordinate for the end point.

Returns void

clearRect(x, y, width, height)

Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent, erasing any previously drawn content.

Parameter Type Optional Description
x number No The x axis of the rectangle’s upper-left corner.
y number No The y axis of the rectangle’s upper-left corner.
width number No The rectangle’s width.
height number No The rectangles height.

Returns void

closePath()

Adds a straight line from the current point to the start of the current sub-path.

Returns void

createImageData(width, height)

creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.

Parameter Type Optional Description
width number No The width of the new ImageData object.
height number No The height of the new ImageData object.

Returns ImageData

createImageData(imageData)

creates a new, blank ImageData object with the same dimensions as the specified existing ImageData object. All of the pixels in the new object are transparent black.

Parameter Type Optional Description
imageData ImageData No An existing ImageData object from which to copy the width and height.

Returns ImageData

fill()

Fills the current or path with the current fill style.

Returns void

fillRect(x, y, width, height)

draws a filled rectangle at (x, y) position whose size is determined by width and height. and whose color is determined by the fillStyle attribute.

Parameter Type Optional Description
x number No The x axis of the rectangle’s upper-left corner.
y number No The y axis of the rectangle’s upper-left corner.
width number No The rectangle’s width.
height number No The rectangles height.

Returns void

fillText(text, x, y)

Fills a given text at the given (x, y) position using the current textAlign and textBaseline values.

Parameter Type Optional Description
text string No The text to render.
x number No The x axis of the coordinate for the text starting point.
y number No The y axis of the coordinate for the text starting point.

Returns void

getImageData(x, y, width, height)

Returns an ImageData object representing the underlying pixel data for the area of the canvas denoted by the given rectangle.

Parameter Type Optional Description
x number No The x axis of the rectangle’s upper-left corner.
y number No The y axis of the rectangle’s upper-left corner.
width number No The rectangle’s width.
height number No The rectangle’s height.

Returns ImageData

lineTo(x, y)

Connects the last point in the sub-path to the (x, y) coordinates with a straight line.

Parameter Type Optional Description
x number No The x axis of the coordinate for the end of the line.
y number No The y axis of the coordinate for the end of the line.

Returns void

moveTo(x, y)

Moves the starting point of a new sub-path to the (x, y) coordinates.

Parameter Type Optional Description
x number No The x axis of the point.
y number No The y axis of the point.

Returns void

putImageData(imageData, x, y)

Paints data from the given ImageData object onto the bitmap at coordinates (x, y).

Parameter Type Optional Description
imageData ImageData No An ImageData object containing the array of pixel values.
x number No x-coordinate of the upper-left corner of the image data rectangle
y number No y-coordinate of the upper-left corner of the image data rectangle

Returns void

quadraticCurveTo(cpx, cpy, x, y)

Adds a quadratic Bézier curve to the path. The starting point is the last point in the current path.

Parameter Type Optional Description
cpx number No The x axis of the coordinate for the control point.
cpy number No The y axis of the coordinate for the control point.
x number No The x axis of the coordinate for the end point.
y number No The y axis of the coordinate for the end point.

Returns void

rect(x, y, width, height)

Creates a path for a rectangle with the top-left corner at (x, y)

Parameter Type Optional Description
x number No The x axis of the rectangle’s upper-left corner.
y number No The y axis of the rectangle’s upper-left corner.
width number No The rectangle’s width.
height number No The rectangles height.

Returns void

restore()

Restores the most recently saved canvas state by popping the top entry in the drawing state stack.

Returns void

rotate(angle)

Adds a rotation to the transformation matrix.

Parameter Type Optional Description
angle number No The angle to rotate clockwise in radians.

Returns void

save()

Saves the entire state of the canvas by pushing the current state onto a stack.

Returns void

scale(x, y)

Adds a scaling transformation to the canvas units by x horizontally and by y vertically.

Parameter Type Optional Description
x number No Scaling factor in the horizontal direction.
y number No Scaling factor in the vertical direction.

Returns void

setTransform(a, b, c, d, e, f)

resets (overrides) the current transformation to the identity matrix and then invokes a transformation described by the arguments of this method. The matrix has the following format: [[a, c, e], [b, d, f], [0, 0, 1]]

Parameter Type Optional Description
a number No Horizontal scaling.
b number No Horizontal skewing.
c number No Vertical skewing.
d number No Vertical scaling.
e number No Horizontal moving.
f number No Vertical moving.

Returns void

stroke()

Strokes the current path with the current stroke style.

Returns void

strokeRect(x, y, width, height)

draws the outline of a rectangle at (x, y) position whose size is determined by width and height using the current stroke style.

Parameter Type Optional Description
x number No The x axis of the rectangle’s upper-left corner.
y number No The y axis of the rectangle’s upper-left corner.
width number No The rectangle’s width.
height number No The rectangles height.

Returns void

strokeText(text, x, y)

Strokes a given text at the given (x, y) position using the current textAlign and textBaseline values.

Parameter Type Optional Description
text string No The text to render.
x number No The x axis of the coordinate for the text starting point.
y number No The y axis of the coordinate for the text starting point.

Returns void

transform(a, b, c, d, e, f)

Multiplies the current transformation with the matrix described by the arguments of this method. The matrix has the following format: [[a, c, e], [b, d, f], [0, 0, 1]]

Parameter Type Optional Description
a number No Horizontal scaling.
b number No Horizontal skewing.
c number No Vertical skewing.
d number No Vertical scaling.
e number No Horizontal moving.
f number No Vertical moving.

Returns void

translate(x, y)

Adds a translation transformation by moving the canvas and its origin x horizontally and y vertically on the grid.

Parameter Type Optional Description
x number No The distance to move in the horizontal direction.
y number No The distance to move in the vertical direction.

Returns void

Properties

fillStyle

Specifies the color to use inside shapes.

Type ColorValue
Settable Yes

font

Specifies the current text style being used when drawing text.

Type FontValue
Settable Yes

lineCap

Determines how the end points of every line are drawn.

Type 'butt' | 'round' | 'square'
Settable Yes

lineJoin

Determines how two connecting segments in a shape are joined together.

Type 'bevel' | 'round' | 'miter'
Settable Yes

lineWidth

The thickness of lines in space units.

Type number
Settable Yes

strokeStyle

Specifies the color to use for the lines around shapes.

Type ColorValue
Settable Yes

textAlign

Specifies the current text alignment being used when drawing text.

Type 'left' | 'right' | 'center' | 'start' | 'end'
Settable Yes

textBaseline

Specifies the current text baseline being used when drawing text.

Type 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'
Settable Yes

Change Events

lineWidthChanged

Fired when the lineWidth property has changed.

Parameter Type Description
value number The new value of lineWidth.

lineCapChanged

Fired when the lineCap property has changed.

Parameter Type Description
value string The new value of lineCap.

lineJoinChanged

Fired when the lineJoin property has changed.

Parameter Type Description
value string The new value of lineJoin.

fillStyleChanged

Fired when the fillStyle property has changed.

Parameter Type Description
value ColorValue The new value of fillStyle.

fontChanged

Fired when the font property has changed.

Parameter Type Description
value FontValue The new value of font.

strokeStyleChanged

Fired when the strokeStyle property has changed.

Parameter Type Description
value ColorValue The new value of strokeStyle.

textAlignChanged

Fired when the textAlign property has changed.

Parameter Type Description
value string The new value of textAlign.

textBaselineChanged

Fired when the textBaseline property has changed.

Parameter Type Description
value string The new value of textBaseline.