Class “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 |
Related Types
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. |
