Class “CanvasContext”

Object > CanvasContext

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

Type: CanvasContext extends Object
Constructor: private
Singleton: No
Namespace: tabris
Direct subclasses: None
JSX Support: No

Examples

JavaScript

import {Canvas, contentView} from 'tabris';

new Canvas({layoutData: 'stretch'})
  .onResize(({target: canvas, width, height}) => {
    const 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 Description
x number The x coordinate of the arc’s center.
y number The y coordinate of the arc’s center.
radius number The arc’s radius.
startAngle number The angle in radians at which the arc starts, measured clockwise from the positive x axis.
endAngle number The angle in radians at which the arc ends, measured clockwise from the positive x axis.
anticlockwise boolean if true, causes the arc to be drawn counter-clockwise between the two angles. Optional.

Returns: undefined

beginPath()

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

Returns: undefined

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 Description
cp1x number The x axis of the coordinate for the first control point.
cp1y number The y axis of the coordinate for the first control point.
cp2x number The x axis of the coordinate for the second control point.
cp2y number The y axis of the coordinate for the second control point.
x number The x axis of the coordinate for the end point.
y number The y axis of the coordinate for the end point.

Returns: undefined

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 Description
x number The x axis of the rectangle’s upper-left corner.
y number The y axis of the rectangle’s upper-left corner.
width number The rectangle’s width.
height number The rectangles height.

Returns: undefined

closePath()

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

Returns: undefined

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 Description
width number The width of the new ImageData object.
height number 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 Description
imageData ImageData An existing ImageData object from which to copy the width and height.

Returns: ImageData

drawImage(image, dx, dy)

Draws the entire given ImageBitmap at the given coordinates (dx, dy) in its natural size.

Parameter Type Description
image ImageBitmap An ImageBitmap object that has not been closed yet.
dx number Destination x-coordinate of the upper-left corner of the image
dy number Destination y-coordinate of the upper-left corner of the image

Returns: undefined

drawImage(image, dx, dy, dWidth, dHeight)

Draws the entire given ImageBitmap at the given coordinates (dx, dy) in the given dimension (dWidth, dHeight).

Parameter Type Description
image ImageBitmap An ImageBitmap object that has not been closed yet.
dx number Destination x-coordinate of the upper-left corner of the image
dy number Destination y-coordinate of the upper-left corner of the image
dWidth number Destination width of the image
dHeight number Destination height of the image

Returns: undefined

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Draws a section (sx, sy, sWidth, sHeight) of the given ImageBitmap at the given coordinates (dx, dy) in the given dimension (dWidth, dHeight).

Parameter Type Description
image ImageBitmap An ImageBitmap object that has not been closed yet.
sx number Source x-coordinate of the upper-left corner of the image
sy number Source y-coordinate of the upper-left corner of the image
sWidth number Source width of the image
sHeight number Source height of the image
dx number Destination x-coordinate of the upper-left corner of the image
dy number Destination y-coordinate of the upper-left corner of the image
dWidth number Destination width of the image
dHeight number Destination height of the image

Returns: undefined

fill()

Fills the current or path with the current fill style.

Returns: undefined

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 Description
x number The x axis of the rectangle’s upper-left corner.
y number The y axis of the rectangle’s upper-left corner.
width number The rectangle’s width.
height number The rectangles height.

Returns: undefined

fillText(text, x, y)

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

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

Returns: undefined

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 Description
x number The x axis of the rectangle’s upper-left corner.
y number The y axis of the rectangle’s upper-left corner.
width number The rectangle’s width.
height number 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 Description
x number The x axis of the coordinate for the end of the line.
y number The y axis of the coordinate for the end of the line.

Returns: undefined

moveTo(x, y)

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

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

Returns: undefined

putImageData(imageData, x, y)

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

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

Returns: undefined

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 Description
cpx number The x axis of the coordinate for the control point.
cpy number The y axis of the coordinate for the control point.
x number The x axis of the coordinate for the end point.
y number The y axis of the coordinate for the end point.

Returns: undefined

rect(x, y, width, height)

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

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

Returns: undefined

restore()

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

Returns: undefined

rotate(angle)

Adds a rotation to the transformation matrix.

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

Returns: undefined

save()

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

Returns: undefined

scale(x, y)

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

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

Returns: undefined

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 Description
a number Horizontal scaling.
b number Horizontal skewing.
c number Vertical skewing.
d number Vertical scaling.
e number Horizontal moving.
f number Vertical moving.

Returns: undefined

stroke()

Strokes the current path with the current stroke style.

Returns: undefined

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 Description
x number The x axis of the rectangle’s upper-left corner.
y number The y axis of the rectangle’s upper-left corner.
width number The rectangle’s width.
height number The rectangles height.

Returns: undefined

strokeText(text, x, y)

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

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

Returns: undefined

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 Description
a number Horizontal scaling.
b number Horizontal skewing.
c number Vertical skewing.
d number Vertical scaling.
e number Horizontal moving.
f number Vertical moving.

Returns: undefined

translate(x, y)

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

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

Returns: undefined

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

ImageData

  • JavaScript Type: tabris.ImageData
  • TypeScript Type: tabris.ImageData
declare class ImageData {
  constructor(data: Uint8ClampedArray, width: number, height?: number);
  constructor(width: number, height: number);
  readonly data: Uint8ClampedArray;
  readonly width: number;
  readonly height: number;
}

Represents the underlying pixel data of an area of a Canvas widget. It is created using the methods createImageData() and getImageData(). It can also be used to set a part of the canvas by using putImageData().

Explanation:

Property Description
data One-dimensional array containing the data in the RGBA order, with integer values between 0 and 255.
width Width in pixels of the ImageData.
height Height in pixels of the ImageData.